{"id":2825,"date":"2024-04-02T21:08:11","date_gmt":"2024-04-02T21:08:11","guid":{"rendered":"https:\/\/dyerduman.design\/?p=2825"},"modified":"2024-04-03T16:59:31","modified_gmt":"2024-04-03T16:59:31","slug":"exploring-the-web-without-a-mouse-making-content-keyboard-accessible","status":"publish","type":"post","link":"https:\/\/dyerduman.design\/exploring-the-web-without-a-mouse-making-content-keyboard-accessible\/","title":{"rendered":"Exploring the Web Without a Mouse: Keyboard Accessible Content"},"content":{"rendered":"
\"A<\/figure>\n\n\n
\n
\n
<\/div>\n\n\n\n
\n

Many people prefer using keyboard navigation because it’s easy to use, works well on different devices, and makes browsing the web smoother. It’s especially helpful for those with disabilities or trouble moving their hands.<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n<\/div><\/div>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
<\/div>\n\n\n\n
\n
\n

It\u2019s Time to Revisit Your Keyboard<\/strong><\/h2>\n\n\n\n

Keyboard-accessible content allows people to navigate the internet without a mouse using alternative keyboards and inputs. Imagine quickly navigating through a website’s menus, completing forms, and activating links without relying on a pointer but rather by tapping and combining a sequence of keys.<\/p>\n\n\n\n

<\/span>
\n

Here are some commonly used keyboard keys (shortcuts) for navigating the web:<\/p>\n\n\n\n

\n
    \n
  1. Activate Focused Item i.e. link, button, etc. <\/strong> (Enter or Spacebar)<\/li>\n\n\n\n
  2. Scroll Through Content<\/strong> (Arrow Keys)<\/li>\n\n\n\n
  3. Move Backward Through Tabs<\/strong> (Ctrl + Shift + Tab or Cmd + Option + Left Arrow on Mac)<\/li>\n\n\n\n
  4. Move Focus Forward and Backward<\/strong> (Tab, Shift + Tab)<\/li>\n\n\n\n
  5. Navigate Back<\/strong> (Alt + Left Arrow or Backspace)<\/li>\n\n\n\n
  6. Navigate Forward<\/strong> (Alt + Right Arrow)<\/li>\n\n\n\n
  7. Open Find Feature<\/strong> (Ctrl + F or Cmd + F on Mac)<\/li>\n\n\n\n
  8. Open New Tab<\/strong> (Ctrl + T or Cmd + T on Mac)<\/li>\n\n\n\n
  9. Reopen Closed Tab<\/strong> (Ctrl + Shift + T or Cmd + Shift + T on Mac)<\/li>\n\n\n\n
  10. Refresh Webpage<\/strong> (F5 or Ctrl + R or Cmd + R on Mac)<\/li>\n\n\n\n
  11. Switch Between Tabs<\/strong> (Ctrl + Tab or Cmd + Option + Right Arrow on Mac)<\/li>\n\n\n\n
  12. Navigate to Address Bar<\/strong> (Ctrl + L or Cmd + L on Mac)<\/li>\n<\/ol>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
    <\/div>\n\n\n\n

    How you build your pages and content should guarantee that everyone, no matter their abilities or preferences, can easily access and use your website.<\/p><\/blockquote><\/figure>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n
    <\/div>\n\n\n\n

    Building Your Content for Keyboard Accessibility<\/strong><\/h2>\n\n\n\n

    The Web Content Accessibility Guidelines (WCAG) define keyboard-accessible content as a Level A success criterion (Keyboard 2.1.1). This means that all functionality on a website can be operated solely through a keyboard interface.  <\/p>\n\n\n\n

    The following list outlines the basic steps you can take to make your website content navigable by keyboard:<\/p>\n\n\n\n

    \n
    \n

    Show visitors where they are on the page<\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/h3>\n\n\n\n

    When users click any key on the keyboard, clearly show which element currently has keyboard focus with a styled focus indicator. This helps users understand their location on the page and which element is active. Common focus indicators include outlines, borders, or changes in colour. Use the tabindex<\/em> attribute<\/a> <\/strong>in HTML and the: focus<\/em> pseudo-class<\/a> <\/strong>in CSS.<\/strong><\/p>\n\n\n\n

    Make interactions accessible<\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/h3>\n\n\n\n

    Users should be able to interact with dropdown menus, checkboxes, radio buttons, and other form controls using keyboard shortcuts. Use semantic HTML elements<\/a><\/strong> like <button>, <a>, <input>, and <select>, which are natively accessible and operable by keyboard.<\/p>\n<\/div>\n\n\n\n

    \n

    Let visitors skip content<\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/h3>\n\n\n\n

    Use skip links<\/a><\/strong> at the beginning of your pages to allow users to bypass repetitive navigation links and go directly to the main content. This is particularly useful for users who navigate using screen readers or keyboard-only input.<\/p>\n\n\n\n

    Help visitors fill forms<\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/h3>\n\n\n\n

    Ensure users can easily navigate through form fields using the Tab key and submit the form using the keyboard alone. Use semantic HTML elements like <form>, <input>, <label>, <select>, and <textarea> to structure your form as well as descriptive labels<\/a><\/strong>, especially for users of screen readers.<\/p>\n<\/div>\n<\/div>\n\n\n\n

    Test everything with your keyboard<\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/h3>\n\n\n\n

    The tab, arrow, and enter are the keys commonly used on your keyboard to navigate your website. Test your website using these keys and observe if you can see an indicator showing you which link is active or if you can play a video or fill out a form. Refer to the Web Content Accessibility Guidelines (WCAG) to understand accessibility standards and how to implement them in your website.<\/p>\n\n\n\n

    <\/div>\n\n\n\n
    \n
    <\/div>\n\n\n\n
    \n
    <\/span>\"\"
    \n

    Let\u2019s Check Your Site Together<\/strong>.<\/h2>\n\n\n\n

    An accessible website is designed and built with clean, flexible code that adapts well to new technologies.<\/p>\n\n\n\n

    \n
    Get Started<\/a><\/div>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
    <\/div>\n<\/div>\n\n\n\n
    \n
    \n

    Resources<\/strong><\/h3>\n\n\n\n

    Operable Content as defined by WCAG 2.0<\/strong><\/h3>\n\n\n\n