Reading Assignment: Accessibility and HTML

Javascript Course 2021
#1

Read the following articles:

While reading, try to answer the following questions.

  1. What is accessibility?
  2. How do people interpret websites without vision?
  3. How does semantic HTML help make websites accessible?
  4. Name a few practices to avoid when writing HTML.
  5. What is a tab index?

Remember to post your answers in this thread.

14 Likes
#2

1.- Accessibility is the practice of making your websites usable by as many people as possible.
2.-Through screen readers.
3.- Proper semantic HTML help makes websites accesible thanks to the “order” it gives to the content so any user accesing will find it clear and easy to navigate inside the website.
4.- Few pratices to avoid when writing html are using presentational HTML and line breaks, using unclear languaje like abbreviations, dashes or acronyms, using HTML tables to create page layouts, etc…
5.- The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).
6.- I really searched and read a lot of info, but i cant find the answer. The confusing point are "complex html node2 and “explainer node” Cant find anything else about node but another programming language, and a bunch of node dot something… But, i think it should be like tag a for linking and then i dont know…:sweat_smile: too newbie i think.

2 Likes
#3
  • What is accessibility?Accessibility is the practice of making your websites usable by as many people as possible, accessible sites is part of the law in some countries.
  • How do people interpret websites without vision? With screen magnifiers and screen readers.
  • How does semantic HTML help make websites accessible? When is well structured and organized is better and more accessible to handicaped people.
  • Name a few practices to avoid when writing HTML.
    disordered code, lack of fundamental structure, code without checking the console simultaneously, code with abbreviations and more
  • What is a tab index? The tabindex attribute specifies the tab order of an element (when the “tab” button is used for navigating).
3 Likes
#4

  1. Accessibility is making sure the user can make full use of your content regardless of how they access the web.

  2. People with vision disabilities interpret websites through screen readers, screen magnifiers, and voice assistants.

  3. Semantic HTML makes your website more accessible by improving the SEO (making your site more findable) and by creating more order and flow for the user.

4.When writing accessible HTML we avoid using HTML tables, marked up buttons using div, unclear language… etc

  1. The tabindex attribute specifies the tab order in which one uses the tab button for navigation.
2 Likes
#5
  1. What is accessibility?
    Accessibility is what is built to html to allow websites to be accessed to all including those with impairments
  2. How do people interpret websites without vision?
    Through screen reading technology
  3. How does semantic HTML help make websites accessible?
    It provides a clear and easy path for the reader to interpret for the user
  4. Name a few practices to avoid when writing HTML.
    Dont use abreviations, dashes or acronyms. using Don’t use HTML tables to create page layouts
  5. What is a tab index?
    the tabindex attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order.
2 Likes
#6
  1. When people with different disabilities can easily access information on a website
  2. It is very difficult to navigate trough a website without sign spots
  3. It gives sign spots to easily navigate between different aspects of a website using a screen-reader or using tab button for example
  4. Using abbreviatures, dashes or acronyms.
  5. You need tab index to set up or prioritize tabbed buttons
1 Like
#7

How does semantic HTML help make websites accessible? Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.
Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
Good for SEO — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic

s, etc., so your documents will be more findable by customers.

Name a few practices to avoid when writing HTML. Spaces on files names(undescore instead), DIVs,

What is a tab index? The tabindex attribute specifies the tab order of an element (when the “tab” button is used for navigating), can be used on any element.

1 Like
#8

1. What is accessibility?

A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times.

2. How do people interpret websites without vision?

They are navigating with the aid of screen reading technology

3. How does semantic HTML help make websites accessible?

Semantics is one of the areas that gets most broken with ''spaghetti" html, hence why proper semantics in HTML make markup lighter, but also properly accessible.

4. Name a few practices to avoid when writing HTML.

Using language and characters that don’t get read out clearly by the screen reader.
For example:

  • Don’t use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7.
  • Expand abbreviations — instead of writing Jan, write January.
  • Expand acronyms, at least once or twice. Instead of writing HTML in the first instance, write Hypertext Markup Language.

5. What is a tab index?

  • The tabindex attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example, if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for tabindex:
  • tabindex=“0” — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of tabindex.
  • tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g., via JavaScript, or as the target of links.
1 Like
#9

What is accesibility?
Making the web page usable by as many people as possible

How do people interpret websites without vision?
With correct semantics such as Alt tags in an image

How does semantic HTML help make websites accesible?
Using correct semantic elements helps the screen reader a lot.

Name a few practices to avoid when writing HTML

  • Avoid HTML table to create page layouts
  • Do not use overly complex language and no jargon/slang
  • Avoid using
    instead of appropriate elements
  • Avoid ambiguous labels

What is tab index?
Allows tabbable elements to become tabbable or recieve focus

1 Like
#10
  1. What is accessibility?
    It is the practice of making sure that your website is usable to all types of users.
  2. How do people interpret websites without vision?
    They have a reader that is able to speak the contents of the website to them.
  3. How does semantic HTML help make websites accessible?
    It helps the reader deliver the picture in an understandable way.
  4. Name a few practices to avoid when writing HTML.
    Labeling everything as
    , unclear language or abbreviations, html tables.
  5. What is a tab index?
    It gives the computer a clear direction for someone that is navigating the website through the tab button.
1 Like
#11

Hi All.

  1. What is accessibility?
  • To use the correct HTML elements to be able to accesed by other people
  1. How do people interpret websites without vision?
  • Just on what they can see on the picture
  1. How does semantic HTML help make websites accessible?
  • Good Semantic elements helps to navigate on the website you create
  1. Name a few practices to avoid when writing HTML.
  • Don’t use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7.
  • Expand abbreviations — instead of writing Jan, write January.
  • Expand acronyms, at least once or twice. Instead of writing HTML in the first instance, write Hypertext Markup Language.
  1. What is a tab index?
  • The tabindex attribute specifies the tab order of an element (when the “tab” button is used for navigating)
1 Like
#12

  • What is accessibility?
    Accessibility is the practice of making your websites widely accessible by most users. To be accessible, developers must practice following good semantics, writing clean code and layouts.

  • How do people interpret websites without vision?
    Through screen readers, screen magnifiers, and voice assistants

  • How does semantic HTML help make websites accessible?
    It helps the screen readers, makes it easier for users to navigate into

  • Name a few practices to avoid when writing HTML.
    Using <div></div> and <span></span> for everything instead of using proper semantics
    Using abbreviations and acronyms

  • What is a tab index?
    Used to manage keyboard focus giving a clear direction for users navigating through the website using the “tab” button.

1 Like
#13

  1. What is accessibility?
    Accessibility is the feature imbedded into a website’s code in order simplify a disabled persons interaction with a given website.

  2. How do people interpret websites without vision?
    Website interpretation tools can read web text and alternative image’s text outloud for vision impaired users

  3. How does semantic HTML help make websites accessible?
    1- Semantic HTML simplifies a website interpretation tool’s ability to understand the designers purpose which then increases a disabled person’s ability to understand and interact with a given website.
    2- Better for SEO and mobile applications

  4. Name a few practices to avoid when writing HTML.
    1- Avoid using generalized semantics, it’s not effective for accessibility software
    2- Avoid using large tables of content as chunks of information.

  5. What is a tab index?
    The tabindex indicates that its element can be focused” Click here for more information on Tab Index

1 Like
#14

  1. What is accessibility?
    The ability to use a website with disabilities, different devices, or integrated shortcuts. good accessibility = using semantic elements which are optimized for their use-case to differentiate content on a page.

  2. How do people interpret websites without vision?
    Screen readers.

  3. How does semantic HTML help make websites accessible?+
    it tags sections of content with proper elements for applications to operate optimally on & feed info to the consumer more easily.

  4. Name a few practices to avoid when writing HTML.
    using bas semantics such as:

    as the first choice.
    using unclear language or slang, abbreviations, or dashes.

  5. What is a tab index?
    Basically, the tabindex attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example, if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for tabindex :

  • tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of tabindex .
  • tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g., via JavaScript, or as the target of links.
2 Likes
#15
  1. accesability is the practice of making ur websit as usable to as many ppl as psbl
  2. scrreen reeders
  3. easier nav through=site
  4. disordered code, code with abbreviations…
  5. specifies the tab for nav.
2 Likes
#16
  1. What is accessibility?
    -Accessibility is what is built to html to allow websites to be accessed to all including those with impairments
  2. How do people interpret websites without vision?
    -They navigate with aid of screen reading technology
  3. How does semantic HTML help make websites accessible?
    -Good semantic HTML provides a clear and easy path for the reader to interpret for the user.
  4. Name a few practices to avoid when writing HTML.
    -Do not use abbreviations, dashes or acronyms.
  5. What is a tab index?
    -tab index attribute specifies the tab order of an element.
2 Likes
#17

  1. Making your html accessible for other with impairments or disabilities.

  2. With screen magnifiers, and screen readers i.e… voice assistants

  3. Using proper semantics when writing html such as wrapping content in proper tags, using attributes and using nesting elements assists websites in being accessible.

  4. Some improper practices would be to use abbreviations, acronyms, and dashes. Some other examples maybe wrapping elements in wrong tags and not using attributes for accessibility.

  5. Tab index lets you focus on certain elements using the tab key. You can also order in which the elements are focused and alternatively choose which elements are to not be targeted.

2 Likes
#18

  1. What is accessibility?
    Accessibility allows screen readers to accurately portray what is happening within the HTML. It also allows they keyboard to be used to access certain elements

  2. How do people interpret websites without vision?
    By using a screen reader.

  3. How does semantic HTML help make websites accessible?
    It allows you to access certain styling and inbuilt functions for certain elements. E.g. using the button element allows for hitting return/enter on the keyboard without inserting extra javascript to enable it (if div were used instead)

  4. Name a few practices to avoid when writing HTML.
    Avoid having “click here” as the anchor text for a link - add contextual links instead

Avoid adding in too much description or personal knowledge in img alts

  1. What is a tab index?
    Tab index allows elements that would otherwise not be tabbable to become tabbable
2 Likes
#19

1 What is accessibility?

Using semantic HTML in order for screen readers and people to be able to navigate the page properly.

2. How do people interpret websites without vision?

Screen readers.

3. How does semantic HTML help make websites accessible?

Better for SEO purposes, better on mobile and easier to develop with.

4. Name a few practices to avoid when writing HTML.

Wrapping wrong tag elements, dashes, abbreviations and not adding contextual links along with large tables of content with too much information.

5. What is a tab index?

Clear direction for navigation of information to another website page or element of more information.

2 Likes
#20

hello, i have a question, i have windows as default and also brave, can i have the build and run on brave since my metamask is on brave? or can i open another metamask in microsoft? or i have to run brave as default browser? im trying to configurate it but… not yet kinda of stuck lol can you help please?

1 Like