Increasing the accessibility in your app

Accessibility

“Accessibility” generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities.
Freecodecambe.com

Improving the accessibility with DOM

Images:

• Alt attribute =>is a text that describes the content of the image, this helps in cases where the image fails to load, It’s also used by search engines to understand what an image contains to include it in search results.

<img alt="Dina's profile picture" src="PATH" />

• In situations when an image is already explained with text content the img still needs an alt attribute, but it can be set to an empty string alt=””.

Headings:

• Screen readers can be set to read-only the headings on a page so the user gets a summary.
• Each page should always have one (and only one) h1 element, which is the main subject of your content.
  This and the other headings are used in part by search engines to understand the topic of the page.

Headings consistency

Links:

• Screen reader users have different options for what type of content their device reads like hear the links available on a page.
• Screen readers do this by reading the link text, or what’s between the anchor atags.

<a href="PATH">write descriptive text here</a>

• you should use brief but descriptive text within the a tags to provide more meaning for these users.

Attributes:

• HTML offers the accesskey attribute to specify a shortcut key to activate or bring focus to an element, it used on any element.
• The HTML tabindex an attribute when it’s on a tag it indicates that element can be focused on
  - It’s important to note that when the tab order is set this way, it overrides the default order
  -A negative tabindex value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard.
  - It is best to just set it to 0 and let the browser figure out where it fits in the tab order based on the DOM structure.

accesskey and tabindex examples

HTML 5 semantic tags:

• <Main>
- It’s meant to surround the information that’s related to the central topic of your page.
  - There should be only one per page.
  - The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. like the "Jump to Main Content" link.
• <Article>
- It is used to wrap independent, self-contained content.
  - difference between Article & section & div are
  <Article> ➡ is for standalone content.
  <Section> ➡ is for grouping thematically related content.
  <Div> ➡ is for if there is no relationship between groups of content.
• <Header>
- It’s used to wrap introductory information or navigation links.
  - Allowing assistive technologies to quickly navigate to that content.
• <Nav>
- This tag is meant to wrap around the main navigation links on your page.
  - If there are repeated site links at the bottom of the page mark it in a nav tag too.
• <Footer>
- It’s primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.
• <Audio>
- Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing.
  - The audio tag supports the controls attribute. This shows the browser default play, pause, and other controls For easier control of screen readers
• <Figure> & <Figcaption>
- For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments.

Forms:

• <Label>
- The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.
  - The value of the for attribute must be the same as the value of the id attribute of the form control.

The value of the for attribute must be the same as the value of the id attribute of the form control.

• <Input type=”Radio” />
- The fieldset tag surrounds the entire grouping of radio buttons to achieve this. It often uses a legend tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element.

surrounds the entire grouping of radio buttons

• <Input type=”date” /> & <Time>
- The type attribute on this element indicates what kind of input will be created it’s important to write it.
  - For older browsers, the type will default to text, so it helps to show users the expected date format in the label or as placeholder text just in case.
  - A valid format of that date is held by the datetime attribute. This is the value accessed by assistive devices

Improving the accessibility with CSS

when you want to visually hide content meant only for screen readers.
This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.

Note: display: none; or visibility: hidden; hides content for everyone, including screen reader users

style content that should exist for the screen readers

colors:

• The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text.
  There are many contrast checking tools available online
• Colorblind users have trouble distinguishing some colors from others usually in hue but sometimes lightness as well.
  You may recall the contrast ratio is calculated using the relative luminance (or lightness) values of the foreground and background colors.

Conclusion

• Have well-organized code that uses appropriate markup
• Ensure text alternatives exist for non-text and visual content
• Create an easily-navigated page that’s keyboard-friendly

Having accessible web content is an ongoing challenge. A great resource for your projects going forward is the W3 Consortium’s Web Content Accessibility Guidelines (WCAG). They set the international standard for accessibility and provide a number of criteria you can use to check your work.

Thank you for reading, if you have any comments let me know, please :)

That’s all for today see you soon in my next story …👋