Skip to content

Latest commit

 

History

History
69 lines (58 loc) · 3.2 KB

Navigating Content.md

File metadata and controls

69 lines (58 loc) · 3.2 KB
Raw

Accessibility- Navigating Content

Source: Accesibility - Udacity Front End Web Development Nanodegree

Table Of Contents: Navigating Content

  • a. Headings
  • b. Links
  • c. Form Controls
  • d. Landmarks

4. Navigating Content

  • Screen Reader can make you navigate through headings, links, form controls, and landmarks.

###Screen Reader Shortcuts (OS X)

  • CMD+F5: turn on VoiceOver
  • TAB, Shift+TAB, arrow keys (keyboard operation): work with VoiceOver running
  • CMD+L: jump to address bar
  • CTRL+Option+U: open Web Rotor / Type search term with Web Rotor open to search within Web Rotor
  • CTRL + Option + ← ↑ ↓ → : explore content
  • CTRL + Option + CMD + H: move forward by heading
  • CTRL + Option + CMD + Shift + H: move backward by heading

Resources

  • Web AIM VoiceOver-full VoiceOverintroduction, including most keyboard commands available.
  • Screen Reader Shortcuts (Windows) NVDA-open source screen reader for Windows.
  • Web AIM Introduction to NVDA- the basics of using NVDA to check accessibility. _ Screen Reader Shortcuts (Linux) Orca-Gnome desktop-manager for Linux.

a. Headings

  • Use meaningful headings and links names.
  • Use a good heading structure from <h1>...<h6>(for long complex content).
  • in DEV TOOL: Look through the HTML of a page and identify each heading's number: <h#>

JavaScript headings snippet:

var hs = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
for (var i = 0; i < hs.length; i++) {
   console.log(hs[i].textContent.trim() + " " +  
               hs[i].tagName,
               hs[i]);
}

Resources (WebAIM checklist items)

-Besides Headers, also take into account Screen Readers and VoiceControl.

  • Other navigational options are: links, form controlsand landmarks.

b. Links

  • Use descriptive link text Example: instead of using "learn more" links text use :learn more about bla bla".
  • Most of the time, a link just needs to be a link! 2.4.9

c. Form Controls

d. Landmarks

  • Navigate by landmarks: <header> <nav> <main> <section> <article> <aside> <footer>
  • Using the proper semantic elements helps assistive technology understand how elements relate to one another.

Takeaway

  • Make sure to use meaningful headers, link text and page structure.
  • Do not try to control the experience of a screen reader user. It will need to more confusion and less positive user experience. Besides, they will use the available information and their tools.