![\"Refreshable](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/11/banner.png\")
A screen reader is an assistive technology, primarily used by people with vision impairments. It converts text, buttons, images and other screen elements into speech or braille. Let’s go through what a screen reader is, how it works and see blind people in action!
\nI use a screen reader on my mobile device every day, so it’s a technology I’m very familiar with. But I know it’s new and strange to most people. So let’s go through the basics!
\nScreen readers are mainly used by people with no or limited vision to get information in a way accessible to them: braille, speech or both.
\nThe best way to understand is to watch it in action. So here’s Marc Sutton showing a desktop screen reader.
\n\nAt the end of this article, we’ve added a few more videos with screen reader users, showcasing different screen readers on different devices. So scroll down and check them out if you’d like!
\nThe first thing most people comment on when meeting a screen reader user is the speed at which the synthetic voice speaks. The Finnish developer Tuukka Ojala has his set at 450 words per minute. Here’s a 5 second audio clip of what that sounds like:
\n\n\nPretty awesome huh! For reference, most sighted people read at about 150 words per minute, so he’s able to read at 3 times that speed. You should check out Tuukkas own article on this topic, where you’ll also find a longer audio clip of the screen reader speaking at lightning speed:
\nSoftware development at 450 words per minute
\nOne thing that most people I meet haven’t thought about is that many screen reader users, like myself, have some remaining vision. So we often use a screen reader in combination with sight. For instance, I’ll sometimes rely on my sight for general navigation using a\u00a0screen magnifier. Then I’ll turn on the screen reader when reading longer texts. On smaller devices I’ll rely more on the screen reader and on larger devices more on screen magnification.
\nA great resource to understand screen reader users better is the\u00a0Screen Reader User Survey by WebAIM, which over a thousand people respond to about once every other year.\u00a0The survey goes through things like:
\nAnd much more! So head on over to that site and learn all you need to know. But below is a summary of how desktop and mobile screen readers are used.
\nOn a desktop, users will usually navigate using their keyboard. Either stepping from object to object or by jumping between different types of components, like headings, forms, links or landmarks.
\nThanks to the awesome Screen Reader User Survey mentioned above, we know that most desktop screen reader users navigate between headings when they arrive at a new page. For instance by pressing the h-key in JAWS\u00a0\u2013 one of the most used desktop screen readers.
\nThere are many keyboard shortcuts for screen readers that lets you do everything from searching content to identifying the font of the text you currently are reading. Here is a list of around 100 shortcuts for the JAWS screen reader.
\nEven though it’s possible, most screen reader users don’t connect a keyboard to their mobile devices. Instead, we navigate by moving our finger on the screen in one of two ways:
\nIt’s very common for people to switch between these modes of navigation. I myself prefer using the touch method most of the time, but then I’ll switch to swipe navigation if I suspect I’m missing something on the screen. Swiping is a more thorough way of navigating, since it sets the focus on every item, even on the smallest of click targets. But it usually takes a bit more time than the touch method.
\nA super handy feature for people who know braille is the braille keyboard in iOS devices. Here’s a video showing how that can be used.
\n\nA great way to learn about screen readers is to try one yourself! It takes a bit of training though. Rob Dodson has made a few great 7-12 minute tutorials for Mac, Windows, iPhone and Android!
\nLet’s start with the iPhone!
\n\nMoving on to Talkback for Android.
\n\nVoiceOver on MacBooks.
\n\nFinally NVDA for Windows!
\n\nCreating screen reader accessible interfaces is a lot about coding correctly. However, you also need to think about making it intuitive, usable and easy to navigate. These \u201dsofter\u201d factors is something many people forget about. But only focusing on the technical aspects will not by default make your interface accessible to screen reader users.
\nSo let\u2019s start with some usability tips!
\nLarge touch targets are crucial for people who navigate on mobile devices using the touch method that we explained about earlier. If touch targets are too small, there is a big risk of the user missing them.
\nA lot of screen reader users get stuck trying to get through what feels like a million links before the main content of a page. These links are usually in menus, headers and social media share functions. Keep these to as few as possible to enhance the user experience of a screen reader user \u2013 and everyone else!
\nEven if you limit the number of links in the site banner, it can be nice to provide a skip link. A skip link is a way for all keyboard users \u2013 including screen reader users \u2013 to jump straight to important parts of a web page.
\n![\"Skip](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/skip-to-content-e1514390045674.png\")
Skip links should be the first focusable elements on a page, and can be visually hidden but shown on focus; in other words: show when the user tabs to them. Here’s an article we wrote all about skip links and what could go wrong with them.
\nShort paragraphs make it easier for a screen reader user to go back and read something on a page again. The most common way to read with a screen reader is one paragraph at a time. So huge paragraphs at a time will be harder to skim through.
\nWhile on the topic of skim reading, it\u2019s important to divide content into many headings and subheadings. Screen reader users will often jump from heading to heading. In fact, the majority of the respondents to WEB Aim’s Screen Reader User Survey say that jumping between headings is their primary way to navigate when they encounter lengthy web pages. If there are too few headings this method will not be effective.
\nShort paragraphs and a good use of headings and subheadings will also help many people with reading impairments like dyslexia.
\nOf course, there are more things to think about when it comes to screen readers and usability, but this is enough for this introductory article. Let\u2019s move on to the more technical arts!
\nFor screen reader users to be able to jump between headings, the headings must be coded as h-elements according to the HTML-specifications. That is: <h1> , <h2> and so on.
\nIf you’re an editor, the thing to remember is to choose headings from the dropdown in your content editor. Do not create headings by styling normal text, like increasing the font size and making it bold.
\n![\"Dropdown](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/Headings.png\")
Also, make sure the heading structure is correct. We see mistakes with this all the time.
\nA screen reader will tell the user what level the heading is at. So don’t follow a heading on level 1 (h1) with a heading on level 3 (h3). It can confuse the users: “Did I miss a heading on level 2?”. And don’t make all your headings on the same level.
\nThink of it as an essay you’re writing in Microsoft Word. If you’d make a table of contents, you need to make sure the heading structure is correct. The same goes for webpages.
\nWhen coming across an image, the screen reader will read the alt-text of that image. This is supposed to be a description of the image that editors or developers have added. Sadly, many don’t write alt-texts or add keywords to the alt-texts hoping to increase their search engine optimization, which becomes an accessibility problem.
\nWe’ve got an article all about alt-texts you should check out if you’re interested in this topic:
\n\nIt’s almost frightening how many times I’ve seen modal windows exclude screen reader users from interfaces. What usually happens is that a modal window opens up but doesn’t receive focus, so the screen reader user is trapped behind it and can’t find it. These modal windows are often crucial confirmation dialogues, asking things like “Are you sure you want to go through with this purchase?”. So not being able to access those components can completely shut users out.
\nLuckily, there are great resources out there to help you build accessible modals. Here are two:
\nAccessible Modal Dialogs – A11ycast (YouTube)
\nCreating an accessible modal dialog (bitsofcode.de)
\n![\"Classic](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/11/captcha3-e1574340006336.jpg\")
Don’t use them. Just don’t.
\nWhy? We have dedicated a whole article to that topic: Captchas suck.
\nA really great way to make your interface accessible is to use standard components and follow coding standards. For instance, if you make a checkbox, use the input element with type checkbox, just like the HTML-standard says you should.
\nIt seems really straight forward, but people create custom components like checkboxes all the time. If you create a custom component \u2013 for instance by styling a div and adding an onClick-listener with javascript \u2013 you don’t get accessibility built-in. You can add it yourself, but it’s often tedious and you need to know what you’re doing. So just use standard components as much as possible.
\nAs a developer, it would be unthinkable to release a website without first looking at it in a browser. Take this notion and apply it to screen readers as well. Learn the basics of screen reader usage, for example by following the video tutorials earlier in this article. And make a habit of always testing your product with a screen reader before releasing it.
\nLast but not least, the best way to learn is from screen reader users themselves. So here we have collected a few great videos for you to enjoy.
\nGayle Yarnall showing how braille displays work.
\n\nSaqib Shaikh shows us how he codes using Visual Studio and a screen reader.
\n\nMolly Burke showing all her Apple products with the screen reader VoiceOver:
\n\nAaron Cannon demonstrates surfing on the web with JAWS, including both good and bad examples of web content.
\n\nThanks for reading, and if you need any support on this topic, we do\u00a0training, workshops\u00a0and other accessibility services that can help you take an inclusive leap forward! Get in touch at hello@axesslab.com.
\nYou might also enjoy these:
\nThe post What is a screen reader? appeared first on Axess Lab.
\n", "content_text": "A screen reader is an assistive technology, primarily used by people with vision impairments. It converts text, buttons, images and other screen elements into speech or braille. Let’s go through what a screen reader is, how it works and see blind people in action!\n\nScreen reader basics\nI use a screen reader on my mobile device every day, so it’s a technology I’m very familiar with. But I know it’s new and strange to most people. So let’s go through the basics!\nScreen readers are mainly used by people with no or limited vision to get information in a way accessible to them: braille, speech or both.\nThe best way to understand is to watch it in action. So here’s Marc Sutton showing a desktop screen reader.\n\nAt the end of this article, we’ve added a few more videos with screen reader users, showcasing different screen readers on different devices. So scroll down and check them out if you’d like!\nFasten your seatbelt \u2013 they are quick!\nThe first thing most people comment on when meeting a screen reader user is the speed at which the synthetic voice speaks. The Finnish developer Tuukka Ojala has his set at 450 words per minute. Here’s a 5 second audio clip of what that sounds like:\n\nhttps://axesslab.com/wp-content/uploads/2019/11/450-wpm-online-audio-converter.com_.mp3\nPretty awesome huh! For reference, most sighted people read at about 150 words per minute, so he’s able to read at 3 times that speed. You should check out Tuukkas own article on this topic, where you’ll also find a longer audio clip of the screen reader speaking at lightning speed:\nSoftware development at 450 words per minute\nHow are screen readers used?\nOne thing that most people I meet haven’t thought about is that many screen reader users, like myself, have some remaining vision. So we often use a screen reader in combination with sight. For instance, I’ll sometimes rely on my sight for general navigation using a\u00a0screen magnifier. Then I’ll turn on the screen reader when reading longer texts. On smaller devices I’ll rely more on the screen reader and on larger devices more on screen magnification.\nA great resource to understand screen reader users better is the\u00a0Screen Reader User Survey by WebAIM, which over a thousand people respond to about once every other year.\u00a0The survey goes through things like:\n\nScreen readers most commonly used\nWeb browsers\nOperating systems\nReasons for inaccessibility\n\nAnd much more! So head on over to that site and learn all you need to know. But below is a summary of how desktop and mobile screen readers are used.\nDesktop screen readers\nOn a desktop, users will usually navigate using their keyboard. Either stepping from object to object or by jumping between different types of components, like headings, forms, links or landmarks.\nThanks to the awesome Screen Reader User Survey mentioned above, we know that most desktop screen reader users navigate between headings when they arrive at a new page. For instance by pressing the h-key in JAWS\u00a0\u2013 one of the most used desktop screen readers.\nThere are many keyboard shortcuts for screen readers that lets you do everything from searching content to identifying the font of the text you currently are reading. Here is a list of around 100 shortcuts for the JAWS screen reader.\nMobile screen readers\nEven though it’s possible, most screen reader users don’t connect a keyboard to their mobile devices. Instead, we navigate by moving our finger on the screen in one of two ways:\n\nTouch navigation: dragging our finger across the screen, and getting what’s under our finger read to us.\nSwipe navigation: Swiping left and right to move to the next or previous item. Kind of like using the tab-key on a computer keyboard.\n\nIt’s very common for people to switch between these modes of navigation. I myself prefer using the touch method most of the time, but then I’ll switch to swipe navigation if I suspect I’m missing something on the screen. Swiping is a more thorough way of navigating, since it sets the focus on every item, even on the smallest of click targets. But it usually takes a bit more time than the touch method.\nA super handy feature for people who know braille is the braille keyboard in iOS devices. Here’s a video showing how that can be used.\n\nTry it yourself\nA great way to learn about screen readers is to try one yourself! It takes a bit of training though. Rob Dodson has made a few great 7-12 minute tutorials for Mac, Windows, iPhone and Android!\nLet’s start with the iPhone!\n\nMoving on to Talkback for Android.\n\nVoiceOver on MacBooks.\n\nFinally NVDA for Windows!\n\nMaking screen reader friendly interfaces\nCreating screen reader accessible interfaces is a lot about coding correctly. However, you also need to think about making it intuitive, usable and easy to navigate. These \u201dsofter\u201d factors is something many people forget about. But only focusing on the technical aspects will not by default make your interface accessible to screen reader users.\nSo let\u2019s start with some usability tips!\nMake touch targets large\nLarge touch targets are crucial for people who navigate on mobile devices using the touch method that we explained about earlier. If touch targets are too small, there is a big risk of the user missing them.\nLimit the number of links in the site banner\nA lot of screen reader users get stuck trying to get through what feels like a million links before the main content of a page. These links are usually in menus, headers and social media share functions. Keep these to as few as possible to enhance the user experience of a screen reader user \u2013 and everyone else!\nInclude skip links\nEven if you limit the number of links in the site banner, it can be nice to provide a skip link. A skip link is a way for all keyboard users \u2013 including screen reader users \u2013 to jump straight to important parts of a web page.\n\nSkip links should be the first focusable elements on a page, and can be visually hidden but shown on focus; in other words: show when the user tabs to them. Here’s an article we wrote all about skip links and what could go wrong with them.\nKeep paragraphs short\nShort paragraphs make it easier for a screen reader user to go back and read something on a page again. The most common way to read with a screen reader is one paragraph at a time. So huge paragraphs at a time will be harder to skim through.\nUse a lot of headings and subheadings\nWhile on the topic of skim reading, it\u2019s important to divide content into many headings and subheadings. Screen reader users will often jump from heading to heading. In fact, the majority of the respondents to WEB Aim’s Screen Reader User Survey say that jumping between headings is their primary way to navigate when they encounter lengthy web pages. If there are too few headings this method will not be effective.\nShort paragraphs and a good use of headings and subheadings will also help many people with reading impairments like dyslexia.\nOf course, there are more things to think about when it comes to screen readers and usability, but this is enough for this introductory article. Let\u2019s move on to the more technical arts!\nCode headings correctly\nFor screen reader users to be able to jump between headings, the headings must be coded as h-elements according to the HTML-specifications. That is: <h1> , <h2> and so on.\nIf you’re an editor, the thing to remember is to choose headings from the dropdown in your content editor. Do not create headings by styling normal text, like increasing the font size and making it bold.\n\nAlso, make sure the heading structure is correct. We see mistakes with this all the time.\nA screen reader will tell the user what level the heading is at. So don’t follow a heading on level 1 (h1) with a heading on level 3 (h3). It can confuse the users: “Did I miss a heading on level 2?”. And don’t make all your headings on the same level.\nThink of it as an essay you’re writing in Microsoft Word. If you’d make a table of contents, you need to make sure the heading structure is correct. The same goes for webpages.\nGive images alt-texts\nWhen coming across an image, the screen reader will read the alt-text of that image. This is supposed to be a description of the image that editors or developers have added. Sadly, many don’t write alt-texts or add keywords to the alt-texts hoping to increase their search engine optimization, which becomes an accessibility problem.\nWe’ve got an article all about alt-texts you should check out if you’re interested in this topic:\nAlt-texts: The ultimate guide\nCareful with modals\nIt’s almost frightening how many times I’ve seen modal windows exclude screen reader users from interfaces. What usually happens is that a modal window opens up but doesn’t receive focus, so the screen reader user is trapped behind it and can’t find it. These modal windows are often crucial confirmation dialogues, asking things like “Are you sure you want to go through with this purchase?”. So not being able to access those components can completely shut users out.\nLuckily, there are great resources out there to help you build accessible modals. Here are two:\nAccessible Modal Dialogs – A11ycast (YouTube)\nCreating an accessible modal dialog (bitsofcode.de)\nCAPTCHA’s\n\nDon’t use them. Just don’t.\nWhy? We have dedicated a whole article to that topic: Captchas suck.\nFollow coding standards\nA really great way to make your interface accessible is to use standard components and follow coding standards. For instance, if you make a checkbox, use the input element with type checkbox, just like the HTML-standard says you should.\nIt seems really straight forward, but people create custom components like checkboxes all the time. If you create a custom component \u2013 for instance by styling a div and adding an onClick-listener with javascript \u2013 you don’t get accessibility built-in. You can add it yourself, but it’s often tedious and you need to know what you’re doing. So just use standard components as much as possible.\nLearn to test with a screen reader\nAs a developer, it would be unthinkable to release a website without first looking at it in a browser. Take this notion and apply it to screen readers as well. Learn the basics of screen reader usage, for example by following the video tutorials earlier in this article. And make a habit of always testing your product with a screen reader before releasing it.\nVideos of screen reader users in action\nLast but not least, the best way to learn is from screen reader users themselves. So here we have collected a few great videos for you to enjoy.\nGayle Yarnall showing how braille displays work.\n\nSaqib Shaikh shows us how he codes using Visual Studio and a screen reader.\n\nMolly Burke showing all her Apple products with the screen reader VoiceOver:\n\nAaron Cannon demonstrates surfing on the web with JAWS, including both good and bad examples of web content.\n\nThanks for reading, and if you need any support on this topic, we do\u00a0training, workshops\u00a0and other accessibility services that can help you take an inclusive leap forward! Get in touch at hello@axesslab.com.\nIf you liked this article…\nYou might also enjoy these:\n\nVideos of people with disabilities using tech\nHow to make your site accessible for screen magnifiers\nAssistive Technologies \u2013 The Switch\n\nThe post What is a screen reader? appeared first on Axess Lab.", "date_published": "2019-11-15T16:27:56+01:00", "date_modified": "2019-11-21T17:09:22+01:00", "author": { "name": "DanielGoransson", "url": "https://axesslab.com/author/danielgoransson/", "avatar": "https://secure.gravatar.com/avatar/d276c4825491378b09d00085946cc412?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/11/featured.png", "attachments": [ [ { "url": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/11/450-wpm-online-audio-converter.com_.mp3", "mime_type": "audio/mpeg", "size_in_bytes": 124804 } ] ] }, { "id": "https://axesslab.com/tech-youtubers/", "url": "https://axesslab.com/tech-youtubers/", "title": "Videos of people with disabilities using tech", "content_html": "There is no better way to understand the importance of accessibility and inclusive design than learning from actual users with disabilities. Here’s a collection of our favorite Youtube videos where people showcase how they use assistive technologies like screen readers, eye tracking, zoom and switches.
\n![\"Wheelchair](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/10/banner.png\")
We’ll start off with former BMX star Stephen Murray showing how he controls the computer to run his business just by using his eyes.
\n\nBrad from All Access Life also uses an eye tracker. Here he is playing World of Warcraft.
\n\nOne of the most expensive things you can do in marketing is run a commercial during the Super Bowl. Big thumbs up for Microsoft on their 2019 commercial, showing kids with motor impairments using the adaptive controller for Xbox.
\n\nOn the topic of the adaptive controller, here’s comedian Zach Anner using it to totally humiliate his buddy while gaming.
\n\nOne last gaming video! Here’s Sven who plays Street Fighter at professional level without sight. Cred to the audio designers behind the game who have made this possible in the Street Fighter series since the early 1990’s.
\n\nMolly Burke, who at the moment has almost 2 million subscribers on Youtube, made a few great videos on using technology with her screen reader.
\n\nHere’s Molly showing a frustrating shopping experience trying to purchase a pair of Converse shoes online.
\n\nHere’s James Rath explaining how he uses a computer with zoom in combination with synthetic speech.
\n\nTommy Edison shows an app that helps him and other people with visual impairments identify objects like currency, sock colors and tin cans.
\n\nOne last video on visual impairments. This is Saqib Shaikh, a blind developer showing how he uses a screen reader to code.
\n\nThis is a longer lecture, where Emily Shea explains how she codes Perl using only her voice due to her Repetitive Strain Injury. You should definitely watch the first part and where she starts coding.
\n\nApple has a nice video series of short clips with assistive technology users. Here’s one video in that series on motor impairments.
\n\nWant to see more similar videos, here’s a\u00a0playlist with all the videos in the Apple Designed for Everyone series.
\nTodd from the previous clip was invited to an Apple event to demonstrate in more detail how he navigates using switches with his tongue.
\n\nLast but not least, here’s another switch control user, Chrisopher Hills, has some great videos where he demonstrates how he uses it in his work as a video editor.
\n\nYou can find all the videos in this post in a single Youtube playlist. How convenient!
\nYoutube playlist: People with disabilities using technology
\nWe’d love to hear from you if you know of other videos with assistive tech users showcasing how they use their technology. Send them our way on Twitter @AxessLab or to hello@axesslab.com\u00a0and we might add them to this article and the playlist!
\nYou might like these ones too:
\nAccessibility according to actual people with disabilities
\nHand tremors and the giant-button-problem
\nHow to make your site accessible for screen magnifiers
\nThe post Videos of people with disabilities using tech appeared first on Axess Lab.
\n", "content_text": "There is no better way to understand the importance of accessibility and inclusive design than learning from actual users with disabilities. Here’s a collection of our favorite Youtube videos where people showcase how they use assistive technologies like screen readers, eye tracking, zoom and switches.\n\nWe’ll start off with former BMX star Stephen Murray showing how he controls the computer to run his business just by using his eyes.\n\nBrad from All Access Life also uses an eye tracker. Here he is playing World of Warcraft.\n\nOne of the most expensive things you can do in marketing is run a commercial during the Super Bowl. Big thumbs up for Microsoft on their 2019 commercial, showing kids with motor impairments using the adaptive controller for Xbox.\n\nOn the topic of the adaptive controller, here’s comedian Zach Anner using it to totally humiliate his buddy while gaming.\n\nOne last gaming video! Here’s Sven who plays Street Fighter at professional level without sight. Cred to the audio designers behind the game who have made this possible in the Street Fighter series since the early 1990’s.\n\nMolly Burke, who at the moment has almost 2 million subscribers on Youtube, made a few great videos on using technology with her screen reader.\n\nHere’s Molly showing a frustrating shopping experience trying to purchase a pair of Converse shoes online.\n\nHere’s James Rath explaining how he uses a computer with zoom in combination with synthetic speech.\n\nTommy Edison shows an app that helps him and other people with visual impairments identify objects like currency, sock colors and tin cans.\n\nOne last video on visual impairments. This is Saqib Shaikh, a blind developer showing how he uses a screen reader to code.\n\nThis is a longer lecture, where Emily Shea explains how she codes Perl using only her voice due to her Repetitive Strain Injury. You should definitely watch the first part and where she starts coding.\n\nApple has a nice video series of short clips with assistive technology users. Here’s one video in that series on motor impairments.\n\nWant to see more similar videos, here’s a\u00a0playlist with all the videos in the Apple Designed for Everyone series.\nTodd from the previous clip was invited to an Apple event to demonstrate in more detail how he navigates using switches with his tongue.\n\nLast but not least, here’s another switch control user, Chrisopher Hills, has some great videos where he demonstrates how he uses it in his work as a video editor.\n\nWe made a playlist\nYou can find all the videos in this post in a single Youtube playlist. How convenient!\nYoutube playlist: People with disabilities using technology\nDo you know something we don’t?\nWe’d love to hear from you if you know of other videos with assistive tech users showcasing how they use their technology. Send them our way on Twitter @AxessLab or to hello@axesslab.com\u00a0and we might add them to this article and the playlist!\nIf you liked this article…\nYou might like these ones too:\nAccessibility according to actual people with disabilities\nHand tremors and the giant-button-problem\nHow to make your site accessible for screen magnifiers\nThe post Videos of people with disabilities using tech appeared first on Axess Lab.", "date_published": "2019-11-08T16:51:16+01:00", "date_modified": "2019-11-20T13:19:12+01:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/10/square.png" }, { "id": "https://axesslab.com/switch-control-for-a-day/", "url": "https://axesslab.com/switch-control-for-a-day/", "title": "I used switch control for a day", "content_html": "Stephen Hawking used something called a switch to communicate, author books and surf the web. Just like Stephen, millions of people around the world with motor impairments use switches to access technology. Sadly, the awareness and knowledge about this assistive technology is generally low. So it\u2019s time to switch the spotlight on switch users!
\n![\"The](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/cover-switch.jpg\")
Short note before we start: This article was first written for the great initiative 24 Accessibility\u00a0– an accessibility article each day in December before Christmas.
\nSwitches can look very different, but in the image above I\u2019m holding a classic one \u2013 basically, a big button that you press to navigate your computer, smartphone or tablet.
\nI\u2019m an accessibility nerd. I organize accessibility meetups, run a company focused on accessibility (Axess Lab), can recite the accessibility guidelines in my sleep and own 6 different accessibility T-shirts. But even though I live and breathe accessibility, I realize I have a very limited knowledge about switches.
\nI know way more about screen readers than I do about switches. When you think about it, that\u2019s really strange. Looking at pure numbers, there are far more people around the world who have motor impairments like Cerebral Palsy, ALS and Parkinson\u2019s disease than who are blind.
\nSo why do we hear and read so little about switch accessibility? I don\u2019t know! But whatever the reason, I feel it\u2019s time to switch it up! Time to learn more about this assistive technology and what we as developers and designers can do to make our technology switch accessible.
\nSo I used a switch control for a day and I\u2019d like to share the insights it gave me with you!
\nI used a classic type of switch, basically a big colored button. It\u2019s the one I\u2019m looking suspiciously at in the first image of this article. This type of switch can be placed in the users\u2019 hands, by their head, elbows, feet or wherever they feel most comfortable with it. I held my switch in my hands.
\nI should mention that there are many other types of switches:
\nThere are many other variations of switches, but they all work similarly to the original button-switch, so I used a button.
\nIt should also be mentioned that I used a single switch. You can set up multiple switches for different actions \u2013 for instance, you could assign one to take you to the home screen, one to move the cursor forward (like pressing the tab-key on a keyboard) and one to click.
\nHowever, it is possible to use a single switch to fully interact with technology. Which I think is pretty cool so I wanted to try that! Also, I know of people who use a single-switch-setup, for instance, the YouTuber Christopher Hills, whose channel I strongly recommend you check out.
\nI used the built-in setting Switch Control in iOS products \u2014 on an iPhone 7, MacBook and Apple TV. It is, of course, possible to use switches on a PC or Android device, but I felt it would be enough of a challenge for me to try it out on one operating system this time.
\nLet me share the insights I got from my day of switch usage with you.
\nEven though I experienced a few obstacles along the way which I\u2019ll go through below, the main thing that stuck with me is how awesome this technology is. All you need is control of a tiny part of your body so you can activate a switch, and suddenly the whole world opens up through technology. You can surf online, pay bills, order pizza, communicate with friends and unlock doors, all through a single switch.
\nImagine the difference in independence and quality of life this means for people with severe motor impairments living today compared to \u2014 say \u2014 40 years ago.
\nEven though the technology is awesome, there are still things that could improve a lot to give a more equal access and experience of technology out there.
\nTyping with switch control is much, much slower than I\u2019m used to. Here\u2019s a video where I type \u201cHello World.\u201d If you don\u2019t want to watch the video I describe what happens in it in the text below the video player.
\nVideo description: A focus indicator jumps across the keyboard and you need to wait until it\u2019s at the letter you want to type. It takes me over a minute to write \u201cHello World.\u201d
\nAfter having practiced a fair bit with typing, I measured how quickly I could type a happy birthday text to my mom. As a comparison, I first typed it with my fingers like I normally do, then a second time with switch control activated. The message was 18 words long. Here\u2019s the result:
\nSo it took me over 12 times as long to type with switch control activated, even though I made very few mistakes and used word suggestions as often as possible.
\nCalculating my typing speed, I was able to type just over 2 words per minute. 2.2 to be exact. As a reference, this article is around 2700 words long, so at 2.2 words per minute, it would take me 20 hours 27 minutes to write it.
\nI asked a colleague of mine to try out typing as well. She had not had the same amount of practice and was able to type at about half my speed, around 1 word per minute.
\nThese speeds are in line with sources on Stephen Hawking\u2019s typing speed, which state Hawking could type around 1 word per minute before adding word predictions which doubled his speed.
\nThe slow typing speed came with a couple of insights for me:
\nI think everyone would agree that scrolling is something you do quite often, especially on smaller devices like smartphones.
\nSo it surprised me that it was painfully slow to scroll on an iPhone. Let me break down what switch users have to do to scroll:
\nSo in total 8 clicks to scroll down. Here\u2019s a short video that shows the interaction described above when I scroll on Twitter.
\n\nVideo description:\u00a0Scrolling one screen on Twitter with switch control. 20 seconds was needed to bring up, navigate and close the interaction menu.
\nOn Android, the scroll gesture seems to be much more effective, as illustrated in this YouTube clip: A11ycast with Rob Dodson \u2013 Switch Device (Youtube). Here it just takes two clicks to scroll: one when the whole page is selected, another one when the scroll down button is selected.
\nWhat about on Mac? Well, it was much quicker to select the scroll gesture than on an iPhone, but the page scrolled so little with each click that it felt like a joke. Here\u2019s a video that shows this in action. Each click of the scroll gesture scrolls the page approximately 5% down.
\n\nVideo description:\u00a0Using switch control to scroll a webpage on a Mac. A focus indicator automatically travels quickly across an interactive menu at the bottom of the screen, 7 steps before it reaches the scroll button. After pressing it, the page just scrolls down slightly, and the cursor starts from the beginning of the interactive menu again.
\nI later realized that I could tap multiple times on the scroll gesture, which helped speed things up a lot. But it would be much smoother if one click on the gesture started scrolling the page down and the next click stopped it.
\nOn Apple TV scrolling was much easier. Here\u2019s a video of that in action.
\n\nVideo description:\u00a0A scroll bar shows up on the side of the page in the YouTube app on a TV. I just select that to scroll down and the focus stays in the scrollbar until I decide to leave it. Then I enter a horizontal scroll instead, which works in the same way. Finally, I activate the video I want to view.
\nAll in all, I think that teams designing switch interfaces for operating systems should focus a lot on improving scrolling. There\u2019s a lot of room for improvement of the user experience in this aspect.
\nFor everyone who builds websites and apps: what we can do is make sure important interactive elements and information are at the top of the page. The classic principle of \u201cabove the fold\u201d (viewable on the screen without scrolling) is very relevant for switch control users. Scrolling requires more time and energy for switch users. In the words of usability gurus Jakob Nielsen and Don Norman: the interaction cost of scrolling is high for switch users.
\nI found myself making mistakes a lot. It was mostly due to me pressing the switch too late, resulting in me activating something I didn\u2019t want to click. The number of misclicks would probably decrease with practice. However, with more practice, I\u2019m pretty sure I would increase the speed of the cursor that moves across the screen, and higher speed would mean a bigger risk of mistakes. So a well-designed error handling is really important.
\nTwitter had a feature I really appreciated. I was replying to a tweet when I accidentally pressed the back button. I had spent a good five minutes writing the reply so I got quite frustrated. But luckily, Twitter had saved my work-in-progress so when I clicked the reply button again I could continue from where I was when the mistake happened. Great stuff!
\nWhenever I received a notification on my phone, focus switched from where I was to the notification. That might sound like a good feature, making it easy to quickly open the notification.
\nHowever, I found it quite frustrating, especially when I was typing something. It takes a while to get the cursor to select the correct key on the onscreen keyboard, and if I received a notification while typing I had to start all over again.
\nHere\u2019s a video showing this in action:
\n\nVideo description:\u00a0I\u2019m writing a Tweet on my phone and have waited 7 seconds for the cursor to get to the \u201cm\u201d when I receive a notification. Focus jumps away from the keyboard, up to the notification at the top of the page and I have to start over typing.
\nI \u2013 like most people \u2013 get quite a lot of notifications from email, Slack, Facebook, news apps and more, so this disruption while typing happened frequently.
\nHere are two different ways I think Apple could go about to improve the user experience of notifications when switch control is activated:
\nSolution 1: If the user has focus on the keyboard, don\u2019t switch focus to notifications when they appear. Instead, let the user finish typing and go to the notification center when they\u2019re done.
\nOr even better:
\nSolution 2: Delay showing notifications until the user is done typing. Then they get the chance of both finishing what they\u2019re writing and click the notification. Of course, there would have to be some time limit in place, so notifications show if the user has a keyboard open for long periods of time.
\nThere are two main modes in switch control on iOS devices, and I\u2019m pretty sure it\u2019s something equivalent on Android:
\nHere\u2019s a video that first shows me using item mode to navigate BBC\u2019s website. I then switch over to point mode, so you can see the difference.
\n\nVideo description:\u00a0First a focus indicator jumps across different objects on the website. Since there are quite a lot of links and buttons, it takes a long time to get through everything. I then bring up a menu and switch to point mode. I first stop a vertical line, then a horizontal line, where I want to click. This is much faster than the first item mode.
\nI found item mode to be easier and more efficient when navigating apps and my phone interface \u2013 like the home screen, settings and so on. However, on websites, it was hard knowing which order things would receive focus in, and strange grouping of objects often confused me. So I found that changing to point mode when surfing the web made things much easier.
\nSurfing the web in point mode is something that YouTuber Christopher Hills explains that he also does, for the same reasons.
\nWebsites could make item mode navigation simpler by having cleaner interfaces with less clickable things on each view and by making sure the order that objects receive focus is logical. Then switch users might not have to change to point mode, which would be nice since it takes some time to switch between the modes.
\nFinally, I want to say something about connection issues. For some reason, I had a hard time connecting the switch to my devices. Quite a few times, it appeared in the Bluetooth menu but wouldn\u2019t connect. I\u2019ve had this issue earlier too, and sometimes it has been because I\u2019ve forgotten to unpair it from another device, but this time I swear it was just messing with me for the fun of it!
\nI had to wait for the switch to drain its battery and restart since there\u2019s no way to restart it manually. Then the switch worked fine again. But it took over a day to get this fixed.
\nI talked to a friend who has a sister who uses switches, and she experiences the same issue with another Bluetooth switch she\u2019s using. It keeps unpairing for some reason.
\nI see a pattern emerge if you consider other assistive technologies as well. The last few months I\u2019ve met three different blind screen reader users who have had to restart their devices when they froze in the middle of usage.
\nSo it seems to me like assistive technology bug far more often than mainstream technology. Which is a huge problem considering that many assistive technology users rely heavily on their tech working.
\nThere are a few ways to try switch control yourself:
\nTo summarize, this experience left me with three main takeaways:
\nThose are the main things that stuck with me, but\u2026
\nMy experience of using a switch for a day is by no means comparable to someone using it every day of their life. So I want to end this article by pointing you to resources where you can learn about switch control from actual switch users:
\nThe post I used switch control for a day appeared first on Axess Lab.
\n", "content_text": "Stephen Hawking used something called a switch to communicate, author books and surf the web. Just like Stephen, millions of people around the world with motor impairments use switches to access technology. Sadly, the awareness and knowledge about this assistive technology is generally low. So it\u2019s time to switch the spotlight on switch users!\n\nShort note before we start: This article was first written for the great initiative 24 Accessibility\u00a0– an accessibility article each day in December before Christmas.\nSwitches can look very different, but in the image above I\u2019m holding a classic one \u2013 basically, a big button that you press to navigate your computer, smartphone or tablet.\nI\u2019m an accessibility nerd. I organize accessibility meetups, run a company focused on accessibility (Axess Lab), can recite the accessibility guidelines in my sleep and own 6 different accessibility T-shirts. But even though I live and breathe accessibility, I realize I have a very limited knowledge about switches.\nI know way more about screen readers than I do about switches. When you think about it, that\u2019s really strange. Looking at pure numbers, there are far more people around the world who have motor impairments like Cerebral Palsy, ALS and Parkinson\u2019s disease than who are blind.\nSo why do we hear and read so little about switch accessibility? I don\u2019t know! But whatever the reason, I feel it\u2019s time to switch it up! Time to learn more about this assistive technology and what we as developers and designers can do to make our technology switch accessible.\nSo I used a switch control for a day and I\u2019d like to share the insights it gave me with you!\nMy setup\nI used a classic type of switch, basically a big colored button. It\u2019s the one I\u2019m looking suspiciously at in the first image of this article. This type of switch can be placed in the users\u2019 hands, by their head, elbows, feet or wherever they feel most comfortable with it. I held my switch in my hands.\nI should mention that there are many other types of switches:\n\nSip-and-puff switches. They are \u201cclicked\u201d by sipping and puffing into a straw-like-component.\nSensory switches. Stephen Hawking had a sensor attached to his cheek that he activated by a small movement with his cheek up or down.\nCamera switches. On iOS products, you can activate a switch by tilting your head to the side.\n\nThere are many other variations of switches, but they all work similarly to the original button-switch, so I used a button.\nIt should also be mentioned that I used a single switch. You can set up multiple switches for different actions \u2013 for instance, you could assign one to take you to the home screen, one to move the cursor forward (like pressing the tab-key on a keyboard) and one to click.\nHowever, it is possible to use a single switch to fully interact with technology. Which I think is pretty cool so I wanted to try that! Also, I know of people who use a single-switch-setup, for instance, the YouTuber Christopher Hills, whose channel I strongly recommend you check out.\nI used the built-in setting Switch Control in iOS products \u2014 on an iPhone 7, MacBook and Apple TV. It is, of course, possible to use switches on a PC or Android device, but I felt it would be enough of a challenge for me to try it out on one operating system this time.\nInsights\nLet me share the insights I got from my day of switch usage with you.\nTechnology is awesome\nEven though I experienced a few obstacles along the way which I\u2019ll go through below, the main thing that stuck with me is how awesome this technology is. All you need is control of a tiny part of your body so you can activate a switch, and suddenly the whole world opens up through technology. You can surf online, pay bills, order pizza, communicate with friends and unlock doors, all through a single switch.\nImagine the difference in independence and quality of life this means for people with severe motor impairments living today compared to \u2014 say \u2014 40 years ago.\nEven though the technology is awesome, there are still things that could improve a lot to give a more equal access and experience of technology out there.\nTyping is slow\nTyping with switch control is much, much slower than I\u2019m used to. Here\u2019s a video where I type \u201cHello World.\u201d If you don\u2019t want to watch the video I describe what happens in it in the text below the video player.\n\nhttps://axesslab.com/wp-content/uploads/2019/02/hello-world-typing.mp4\nVideo description: A focus indicator jumps across the keyboard and you need to wait until it\u2019s at the letter you want to type. It takes me over a minute to write \u201cHello World.\u201d\nAfter having practiced a fair bit with typing, I measured how quickly I could type a happy birthday text to my mom. As a comparison, I first typed it with my fingers like I normally do, then a second time with switch control activated. The message was 18 words long. Here\u2019s the result:\n\nWithout switch control: 43 seconds\nWith switch control: 8 mins 52 seconds (or 532 seconds)\n\nSo it took me over 12 times as long to type with switch control activated, even though I made very few mistakes and used word suggestions as often as possible.\nCalculating my typing speed, I was able to type just over 2 words per minute. 2.2 to be exact. As a reference, this article is around 2700 words long, so at 2.2 words per minute, it would take me 20 hours 27 minutes to write it.\nI asked a colleague of mine to try out typing as well. She had not had the same amount of practice and was able to type at about half my speed, around 1 word per minute.\nThese speeds are in line with sources on Stephen Hawking\u2019s typing speed, which state Hawking could type around 1 word per minute before adding word predictions which doubled his speed.\nThe slow typing speed came with a couple of insights for me:\n\nWord predictions when typing is super useful. But word prediction could improve a lot. For instance, I wrote \u201cswitch control\u201d twice in one sentence, but my onscreen keyboard didn\u2019t suggest it to me any quicker the second time around.\nAutocomplete in search fields is very helpful.\nTime limits \u2013 getting kicked out of a form if you don\u2019t complete it in a set amount of time \u2013 is a severe accessibility barrier.\nForms that prefill automatically save tons of time and energy.\nDictation \u2014 speaking your message \u2014 would make typing much quicker. However, many people with motor impairments also have a speech impairment that makes dictation impossible. So I decided not to use dictation in my one-day-experiment.\n\nScrolling is sometimes painfully slow\nI think everyone would agree that scrolling is something you do quite often, especially on smaller devices like smartphones.\nSo it surprised me that it was painfully slow to scroll on an iPhone. Let me break down what switch users have to do to scroll:\n\n2 quick clicks to bring up an interaction menu\n1 click to select the row with scroll button\n1 click to select the scroll button\n1 click to select the row with scroll down button\n1 click to select the scroll down button\n1 click to go back to the main menu\n1 click to close the interaction menu\n\nSo in total 8 clicks to scroll down. Here\u2019s a short video that shows the interaction described above when I scroll on Twitter.\nhttps://axesslab.com/wp-content/uploads/2019/02/scroll-twitter.mp4\nVideo description:\u00a0Scrolling one screen on Twitter with switch control. 20 seconds was needed to bring up, navigate and close the interaction menu.\nOn Android, the scroll gesture seems to be much more effective, as illustrated in this YouTube clip: A11ycast with Rob Dodson \u2013 Switch Device (Youtube). Here it just takes two clicks to scroll: one when the whole page is selected, another one when the scroll down button is selected.\nWhat about on Mac? Well, it was much quicker to select the scroll gesture than on an iPhone, but the page scrolled so little with each click that it felt like a joke. Here\u2019s a video that shows this in action. Each click of the scroll gesture scrolls the page approximately 5% down.\nhttps://axesslab.com/wp-content/uploads/2019/02/scroll-mac.mp4\nVideo description:\u00a0Using switch control to scroll a webpage on a Mac. A focus indicator automatically travels quickly across an interactive menu at the bottom of the screen, 7 steps before it reaches the scroll button. After pressing it, the page just scrolls down slightly, and the cursor starts from the beginning of the interactive menu again.\nI later realized that I could tap multiple times on the scroll gesture, which helped speed things up a lot. But it would be much smoother if one click on the gesture started scrolling the page down and the next click stopped it.\nOn Apple TV scrolling was much easier. Here\u2019s a video of that in action.\nhttps://axesslab.com/wp-content/uploads/2019/02/scroll-apple-tv.mp4\nVideo description:\u00a0A scroll bar shows up on the side of the page in the YouTube app on a TV. I just select that to scroll down and the focus stays in the scrollbar until I decide to leave it. Then I enter a horizontal scroll instead, which works in the same way. Finally, I activate the video I want to view.\nAll in all, I think that teams designing switch interfaces for operating systems should focus a lot on improving scrolling. There\u2019s a lot of room for improvement of the user experience in this aspect.\nFor everyone who builds websites and apps: what we can do is make sure important interactive elements and information are at the top of the page. The classic principle of \u201cabove the fold\u201d (viewable on the screen without scrolling) is very relevant for switch control users. Scrolling requires more time and energy for switch users. In the words of usability gurus Jakob Nielsen and Don Norman: the interaction cost of scrolling is high for switch users.\nMistakes increase\nI found myself making mistakes a lot. It was mostly due to me pressing the switch too late, resulting in me activating something I didn\u2019t want to click. The number of misclicks would probably decrease with practice. However, with more practice, I\u2019m pretty sure I would increase the speed of the cursor that moves across the screen, and higher speed would mean a bigger risk of mistakes. So a well-designed error handling is really important.\nTwitter had a feature I really appreciated. I was replying to a tweet when I accidentally pressed the back button. I had spent a good five minutes writing the reply so I got quite frustrated. But luckily, Twitter had saved my work-in-progress so when I clicked the reply button again I could continue from where I was when the mistake happened. Great stuff!\nNotifications steal focus, literally\nWhenever I received a notification on my phone, focus switched from where I was to the notification. That might sound like a good feature, making it easy to quickly open the notification.\nHowever, I found it quite frustrating, especially when I was typing something. It takes a while to get the cursor to select the correct key on the onscreen keyboard, and if I received a notification while typing I had to start all over again.\nHere\u2019s a video showing this in action:\nhttps://axesslab.com/wp-content/uploads/2019/02/annoying-notification-.mp4\nVideo description:\u00a0I\u2019m writing a Tweet on my phone and have waited 7 seconds for the cursor to get to the \u201cm\u201d when I receive a notification. Focus jumps away from the keyboard, up to the notification at the top of the page and I have to start over typing.\nI \u2013 like most people \u2013 get quite a lot of notifications from email, Slack, Facebook, news apps and more, so this disruption while typing happened frequently.\nHere are two different ways I think Apple could go about to improve the user experience of notifications when switch control is activated:\nSolution 1: If the user has focus on the keyboard, don\u2019t switch focus to notifications when they appear. Instead, let the user finish typing and go to the notification center when they\u2019re done.\nOr even better:\nSolution 2: Delay showing notifications until the user is done typing. Then they get the chance of both finishing what they\u2019re writing and click the notification. Of course, there would have to be some time limit in place, so notifications show if the user has a keyboard open for long periods of time.\nItem mode versus point mode\nThere are two main modes in switch control on iOS devices, and I\u2019m pretty sure it\u2019s something equivalent on Android:\n\nItem mode \u2013 the cursor jumps from object to object on the screen. Kind of like pressing the tab-key over and over again on your keyboard. Although it\u2019s a bit smarter than the tab key since it groups elements together to allow users to be more efficient.\nPoint mode \u2013 like a virtual mouse pointer. First, a vertical line swipes from left to right on the screen, you activate your switch to stop the line. Then a horizontal line swipes from top to bottom and you activate your switch to stop that one too. Where the two lines intersect, a click is triggered.\n\nHere\u2019s a video that first shows me using item mode to navigate BBC\u2019s website. I then switch over to point mode, so you can see the difference.\nhttps://axesslab.com/wp-content/uploads/2019/02/object-vs-point-mode.mp4\nVideo description:\u00a0First a focus indicator jumps across different objects on the website. Since there are quite a lot of links and buttons, it takes a long time to get through everything. I then bring up a menu and switch to point mode. I first stop a vertical line, then a horizontal line, where I want to click. This is much faster than the first item mode.\nI found item mode to be easier and more efficient when navigating apps and my phone interface \u2013 like the home screen, settings and so on. However, on websites, it was hard knowing which order things would receive focus in, and strange grouping of objects often confused me. So I found that changing to point mode when surfing the web made things much easier.\nSurfing the web in point mode is something that YouTuber Christopher Hills explains that he also does, for the same reasons.\nWebsites could make item mode navigation simpler by having cleaner interfaces with less clickable things on each view and by making sure the order that objects receive focus is logical. Then switch users might not have to change to point mode, which would be nice since it takes some time to switch between the modes.\nI struggled with connection issues\nFinally, I want to say something about connection issues. For some reason, I had a hard time connecting the switch to my devices. Quite a few times, it appeared in the Bluetooth menu but wouldn\u2019t connect. I\u2019ve had this issue earlier too, and sometimes it has been because I\u2019ve forgotten to unpair it from another device, but this time I swear it was just messing with me for the fun of it!\nI had to wait for the switch to drain its battery and restart since there\u2019s no way to restart it manually. Then the switch worked fine again. But it took over a day to get this fixed.\nI talked to a friend who has a sister who uses switches, and she experiences the same issue with another Bluetooth switch she\u2019s using. It keeps unpairing for some reason.\nI see a pattern emerge if you consider other assistive technologies as well. The last few months I\u2019ve met three different blind screen reader users who have had to restart their devices when they froze in the middle of usage.\nSo it seems to me like assistive technology bug far more often than mainstream technology. Which is a huge problem considering that many assistive technology users rely heavily on their tech working.\nTry it yourself\nThere are a few ways to try switch control yourself:\n\nThe easiest way to try this out if you don\u2019t own a switch is probably to use an Android phone. Find the phone\u2019s accessibility/ease-of-use settings and go into Switch Access. The reason Android is great is that you can assign the up and down volume keys as switches and get going really quickly, without having to buy a switch.\nIf you own a Mac you can assign any key on your keyboard as a switch, which is great. So go into Settings and Accessibility to try this out.\nOn iOS products you can set the phone\u2019s screen to be a switch. This is scary since when you\u2019ve activated this, any tap on the screen is like clicking a switch, instead of what usually happens when you tap the screen. You can also use the camera as a switch, so when you tilt your head left or right it activates the switch. But this wasn\u2019t very stable when I tested it.\nIf you want to try a real Switch you can get one for around \u20ac100. Just Google \u201cbuy switch assistive technology\u201d and you\u2019ll get loads of hits.\n\nMy key takeaways\nTo summarize, this experience left me with three main takeaways:\n\nSwitch technology is awesome. Even though most things take longer time, I could still do everything I otherwise do \u2013 just using a single switch. What a great leap towards an independent life this must be for people with limited motor abilities!\nThere\u2019s a lot that switch interface producers like Apple could do to improve the user experience for switch users. For instance more efficient scrolling, less annoying notifications and improved word predictions.\nDesigners and developers of apps and websites should mainly keep their interfaces clean, avoid time limits and have good error handling. So basically work on creating a good user experience for all users.\n\nThose are the main things that stuck with me, but\u2026\n\u2026don\u2019t rely on my experience!\nMy experience of using a switch for a day is by no means comparable to someone using it every day of their life. So I want to end this article by pointing you to resources where you can learn about switch control from actual switch users:\n\nChristopher Hill\u2019s YouTube channel\nApple\u2019s 2 minute videos Ian M and Todd S\nDifferent switch users, YouTube playlist\n@AbleGamers on Twitter\n@OneSwitch on Twitter\nSwitch gaming blog\n\nThe post I used switch control for a day appeared first on Axess Lab.", "date_published": "2019-11-01T10:43:14+01:00", "date_modified": "2019-11-01T11:06:46+01:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/cover-switch-e1572602778161.jpg", "attachments": [ [ { "url": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/hello-world-typing.mp4", "mime_type": "video/mp4", "size_in_bytes": 7309398 }, { "url": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/scroll-twitter.mp4", "mime_type": "video/mp4", "size_in_bytes": 4590450 }, { "url": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/scroll-mac.mp4", "mime_type": "video/mp4", "size_in_bytes": 11371765 }, { "url": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/scroll-apple-tv.mp4", "mime_type": "video/mp4", "size_in_bytes": 70947413 }, { "url": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/annoying-notification-.mp4", "mime_type": "video/mp4", "size_in_bytes": 1732399 }, { "url": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/object-vs-point-mode.mp4", "mime_type": "video/mp4", "size_in_bytes": 8902649 } ] ] }, { "id": "https://axesslab.com/flipped-web-design/", "url": "https://axesslab.com/flipped-web-design/", "title": "Last impressions first \u2013 a flipped approach to web design", "content_html": "Web teams usually spend a tremendous amount of time, money and energy on designing lovely, beautiful start pages. Let’s apply the psychological concept known as the peak-end rule to question that and introduce a flipped approach to web design.
\n![\"Book](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/10/The_End_Book-banner-1.png\")
If your parents are like most parents, you’ve probably been raised to care a lot about first impressions. How to introduce yourself, shake hands in the right way, dress properly and so on. I remember my parents repeating “first impressions last” and “you never get a second chance at a first impression” to me as a kid.
\nThen time ticks on and kids with this mindset grow up. Some of us go into the web world and become designers, developers, content creators, scrum masters and so on. It’s natural for us to apply this first-impressions-matter-mindset to the projects we work on. So we focus on the start page and make sure our users get the ultimate first impression when using the interfaces we create.
\nThe start page is also probably the thing that is displayed in marketing materials, on important board meetings and what you show friends or family members who ask what you actually do during the days.
\nBut I believe it’s time to start questioning the importance of first impressions in digital products. Let’s use Nobel Prize-winning psychology to argue that we’re overrating the impact of start and landing pages, whilst at the same time underrating other aspects of the user experience. It’s time to shift focus if we really care about how our users experience, feel about and remember the sites and apps we build.
\n![\"Meme](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/06/First-impression.png\")
I don’t know Daniel Kahneman, but I feel quite confident saying he’s a smart guy. Kahneman is a psychologist who won the Nobel Prize in 2002 and has written the masterpiece Thinking Fast and Slow. He is an expert in the way we think, make decisions and experience the world. He and his colleagues have shown that two things matter a bit more than everything else when people judge an experience:
\n![\"Bar](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/10/Kopia-av-Axesslab-articles-2.png\")
For instance, let’s say you go through a medical procedure. Every minute you’re asked to rate how painful it is from a scale from 1-10. In the beginning, you don’t feel much pain at all, so you rate it a 2. But at its height there was a very painful moment that you rated a 10. And at the end of the procedure you rate your pain as a 6.
\nWhen you’re asked about the experience a few days later you’re likely to rate it at an 8. In other words, the average between the peak 10 and end 6. It doesn’t matter that your first experience was a 2. When thinking back on an experience, most people will only consider the peak and end. Here’s a more in-depth article about the peak-end rule (medium.com).
\nIf you want positively affect the user experience your site or app, don’t focus a lot of time and energy on designing the first experience your users encounter. Instead, consider how you can make sure that the peak and last experience of using your site is awesome.
\nSo let’s go through:
\nOf these two, creating an awesome last experience is most important. I’ll get to why soon. But let’s go through them in order.
\nA great way to create awesome peak experiences is to think seriously about how you can make your users smile. I’ve written a whole article on charming interfaces, but in essence, it’s about working with microcopy (tiny words with a huge UX impact) \u2013 and illustrations to create pleasant experiences.
\nLet’s look at my favorite example of how microcopy can be used to create a peak positive user experience. It’s from Prezi’s sign up form, which makes it even more impressive since forms are usually really dull.
\n![\"Complements](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/09/prezi3.png\")
The form complements the user with brilliant microcopy after entering the details they ask for. Genious!
\nIf you want to become a wizard in microcopy, I’d recommend:
\nApart from microcopy, working with illustrations and animations is a good way of creating positive peak experiences. Here’s a very cute login form from readme.io, where an illustrated owl peeks when you’re typing your email but covers its eyes when you type your password.
\n![\"An](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/06/Closing-eyes.png\")
An important detail in the peak-end rule is that the peak experience,\u00a0good or bad,\u00a0is what will define a users overall feelings of the experience.\u00a0So for all of us who design digital products \u2013 or any product or service for that matter \u2013 it’s very important that our users’ most positive experiences create a more intense reaction than their most negative experiences.
\nIf a user finds most of your site pleasant, but their peak experience is frustration of filling out a CAPTCHA three times \u2013 well, sadly, the pleasant experiences won’t matter much at all.
\nAs you probably experienced yourself multiple times: confusing or frustrating experiences easily create strong reactions. On top of that, these types of negative experiences are very common in digital products. So you need to work hard on minimizing the risk of strong negative experiences. On that topic, I have two tips:
\nWhen it comes to error messages, the most important thing is to make sure users understand what’s gone wrong and how to fix it. This article on best practices for error messages is a nice read. But on top of that, error messages are often a good place to use some charm and humor to minimize the negative emotions they cause.
\n![\"Error](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/06/oops.jpg\")
![\"Error](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/09/twitter.png\")
![\"404](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/09/dailyui-404-008-dribbble.jpg\")
So before moving on to the last experience, let’s summarise how to create an awesome peak experience:
\nSo let’s now shift our focus to the last experiences. This is a hugely overlooked opportunity to positively affect how your users remember your site. One of the best UX-hacks I know is to do everything you can to create an awesome last experience, thereby merging the last experience with the peak experience.
\nIt would look something like this when applying Kahneman’s peak-end model:
\n![\"Bar](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/06/Peak-and-end-same.png\")
So if the user’s memory of an experience is based on the average between the peak and end experience, and you make sure that the last experience is a 10, then most users will remember the whole experience as a 10.
\nI suggest moving a lot of that time and energy that you now spend on start pages to creating a fantastic last experience. That will most likely have a huge impact on the user experience and what people tell their friends about your service.
\nTo do this, start by identifying where your users are when they stop interacting with you. It’s often at one of these places:
\nThen make sure these places are awesome! Let’s look at some examples.
\nSpotify does this really well by providing an offboarding process with great microcopy and a charming playlist called “Can we still be friends?”:
\n![\"Spotify](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/09/spotify-cancel-1.png\")
Disney also gave some love to their offboarding:
\n![\"Offboarding](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/06/Disney-offboarding.jpg\")
Gov.uk focused on A/B testing the last experience of one of their thank-you-pages. They made it so good that each year, an estimated 100 000 more people sign up as organ donors each year through one link on that page. Nice!
\n![\"Four](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/10/organdonation.png\")
It’s not only the digital world that can work on last experiences.\u00a0When leaving the dentist as a kid, I remember always getting a sticker and some cheerful words. Some hospitals have taken this a step further, with an end of treatment bell:
\n![\"A](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/10/End-of-treatment-bell.jpg\")
Finally, back to the digital space! More sites could put some effort into their footers. It’s difficult to find many good examples of this, but some have at least added illustrations to their footers which I think is a step in the right direction:
\n![\"Cute](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/06/bei-footer.png\")
![\"Footer](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/06/footer.png\")
So to sum up, if you’re serious about your user experience you should stop worrying about the pixels on your start page and begin focusing on the last experience.
\n“First experiences last” is an overrated saying.
\n“Last experiences first” is the new black.
\nYou might also enjoy these ones:
\nHow icons are ruining interfaces
\nHand tremors and the giant-button-problem
\nCharming interfaces \u2013 make your users smile
\nThe post Last impressions first \u2013 a flipped approach to web design appeared first on Axess Lab.
\n", "content_text": "Web teams usually spend a tremendous amount of time, money and energy on designing lovely, beautiful start pages. Let’s apply the psychological concept known as the peak-end rule to question that and introduce a flipped approach to web design.\n\nWhy we care so much about start pages\nIf your parents are like most parents, you’ve probably been raised to care a lot about first impressions. How to introduce yourself, shake hands in the right way, dress properly and so on. I remember my parents repeating “first impressions last” and “you never get a second chance at a first impression” to me as a kid.\nThen time ticks on and kids with this mindset grow up. Some of us go into the web world and become designers, developers, content creators, scrum masters and so on. It’s natural for us to apply this first-impressions-matter-mindset to the projects we work on. So we focus on the start page and make sure our users get the ultimate first impression when using the interfaces we create.\nThe start page is also probably the thing that is displayed in marketing materials, on important board meetings and what you show friends or family members who ask what you actually do during the days.\nBut I believe it’s time to start questioning the importance of first impressions in digital products. Let’s use Nobel Prize-winning psychology to argue that we’re overrating the impact of start and landing pages, whilst at the same time underrating other aspects of the user experience. It’s time to shift focus if we really care about how our users experience, feel about and remember the sites and apps we build.\n\nThe peak-end rule\nI don’t know Daniel Kahneman, but I feel quite confident saying he’s a smart guy. Kahneman is a psychologist who won the Nobel Prize in 2002 and has written the masterpiece Thinking Fast and Slow. He is an expert in the way we think, make decisions and experience the world. He and his colleagues have shown that two things matter a bit more than everything else when people judge an experience:\n\nHow they felt at the peak of the experience (best or worst)\nHow they felt at the end\n\n\nFor instance, let’s say you go through a medical procedure. Every minute you’re asked to rate how painful it is from a scale from 1-10. In the beginning, you don’t feel much pain at all, so you rate it a 2. But at its height there was a very painful moment that you rated a 10. And at the end of the procedure you rate your pain as a 6.\nWhen you’re asked about the experience a few days later you’re likely to rate it at an 8. In other words, the average between the peak 10 and end 6. It doesn’t matter that your first experience was a 2. When thinking back on an experience, most people will only consider the peak and end. Here’s a more in-depth article about the peak-end rule (medium.com).\nApplying the peak-end rule to web design\nIf you want positively affect the user experience your site or app, don’t focus a lot of time and energy on designing the first experience your users encounter. Instead, consider how you can make sure that the peak and last experience of using your site is awesome.\nSo let’s go through:\n\nHow to create an awesome peak experience\nHow to create an awesome last experience\n\nOf these two, creating an awesome last experience is most important. I’ll get to why soon. But let’s go through them in order.\nHow to create an awesome peak experience\nA great way to create awesome peak experiences is to think seriously about how you can make your users smile. I’ve written a whole article on charming interfaces, but in essence, it’s about working with microcopy (tiny words with a huge UX impact) \u2013 and illustrations to create pleasant experiences.\nLet’s look at my favorite example of how microcopy can be used to create a peak positive user experience. It’s from Prezi’s sign up form, which makes it even more impressive since forms are usually really dull.\n\nThe form complements the user with brilliant microcopy after entering the details they ask for. Genious!\nIf you want to become a wizard in microcopy, I’d recommend:\n\nMicrocopy and UX-writing (Facebook group)\u00a0\nGood UX Writing (Instagram)\nMicrocopy \u2013 the complete guide (book)\n\nApart from microcopy, working with illustrations and animations is a good way of creating positive peak experiences. Here’s a very cute login form from readme.io, where an illustrated owl peeks when you’re typing your email but covers its eyes when you type your password.\n\nAn important detail in the peak-end rule is that the peak experience,\u00a0good or bad,\u00a0is what will define a users overall feelings of the experience.\u00a0So for all of us who design digital products \u2013 or any product or service for that matter \u2013 it’s very important that our users’ most positive experiences create a more intense reaction than their most negative experiences.\nIf a user finds most of your site pleasant, but their peak experience is frustration of filling out a CAPTCHA three times \u2013 well, sadly, the pleasant experiences won’t matter much at all.\nAs you probably experienced yourself multiple times: confusing or frustrating experiences easily create strong reactions. On top of that, these types of negative experiences are very common in digital products. So you need to work hard on minimizing the risk of strong negative experiences. On that topic, I have two tips:\n\nUser test regularly. Nothing beats watching people use your site and seeing where they react strongly, get confused or get stuck. And while on that subject, consider testing with users with disabilities.\nWork on your error messages. It’s the one place where users are most likely to experience strong, negative feelings.\n\nWhen it comes to error messages, the most important thing is to make sure users understand what’s gone wrong and how to fix it. This article on best practices for error messages is a nice read. But on top of that, error messages are often a good place to use some charm and humor to minimize the negative emotions they cause.\n\n\n\nSo before moving on to the last experience, let’s summarise how to create an awesome peak experience:\n\nMake your users smile. For instance by working with microcopy and animations.\nAvoid negative peak experiences. For instance by user testing and focusing on error handling.\n\nHow to create an awesome last experience\nSo let’s now shift our focus to the last experiences. This is a hugely overlooked opportunity to positively affect how your users remember your site. One of the best UX-hacks I know is to do everything you can to create an awesome last experience, thereby merging the last experience with the peak experience.\nIt would look something like this when applying Kahneman’s peak-end model:\n\nSo if the user’s memory of an experience is based on the average between the peak and end experience, and you make sure that the last experience is a 10, then most users will remember the whole experience as a 10.\nI suggest moving a lot of that time and energy that you now spend on start pages to creating a fantastic last experience. That will most likely have a huge impact on the user experience and what people tell their friends about your service.\nTo do this, start by identifying where your users are when they stop interacting with you. It’s often at one of these places:\n\nConfirmation messages or order summaries \u2013 after having bought something or completed a form\nOffboarding processes\nFooters \u2013 after having read through your content\n\nThen make sure these places are awesome! Let’s look at some examples.\nSpotify does this really well by providing an offboarding process with great microcopy and a charming playlist called “Can we still be friends?”:\n\nDisney also gave some love to their offboarding:\n\nGov.uk focused on A/B testing the last experience of one of their thank-you-pages. They made it so good that each year, an estimated 100 000 more people sign up as organ donors each year through one link on that page. Nice!\n\nIt’s not only the digital world that can work on last experiences.\u00a0When leaving the dentist as a kid, I remember always getting a sticker and some cheerful words. Some hospitals have taken this a step further, with an end of treatment bell:\n\nFinally, back to the digital space! More sites could put some effort into their footers. It’s difficult to find many good examples of this, but some have at least added illustrations to their footers which I think is a step in the right direction:\n\n\nA flipped approach to web design\nSo to sum up, if you’re serious about your user experience you should stop worrying about the pixels on your start page and begin focusing on the last experience.\n“First experiences last” is an overrated saying.\n“Last experiences first” is the new black.\nIf you liked this article\nYou might also enjoy these ones:\nHow icons are ruining interfaces\nHand tremors and the giant-button-problem\nCharming interfaces \u2013 make your users smile\nThe post Last impressions first \u2013 a flipped approach to web design appeared first on Axess Lab.", "date_published": "2019-10-17T12:07:41+02:00", "date_modified": "2019-10-25T10:54:07+02:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/10/The_End_Book-1.png" }, { "id": "https://axesslab.com/digital-apartheid/", "url": "https://axesslab.com/digital-apartheid/", "title": "Apple\u2019s new feature a step towards digital apartheid", "content_html": "To be honest, I don’t really have time to write this article. I’ve got loads of other things I should be doing. But it needs to be written. Now. So I’ve popped up my laptop on the bus and am angrily typing away.
\n![\"Sign](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/03/banner.png\")
So Apple just released a new accessibility “feature” called accessibility events. Here’s how they explain the feature:
\n\nAccessibility events allow websites to customize their behaviour for assistive technologies, like VoiceOver. Enabling Accessibility Events may reveal whether an assistive technology is active on your iPhone.
Here it is in action on an iPhone:
\n![\"Toggle](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/03/settings.jpg\")
So this feature lets web developers recognise when an assistive technology is active on the user’s device. Sounds great, right? Gives developers a chance to improve the user experience for people with disabilities.
\nBut think a step further and you’ll realise that it’s actually a terrible idea.
\nWhy?
\nWell, accessibility guru and screen reader user Marco Zehe explains it well in his article Why screen reader detection on the web is a bad thing. Here is the most important part in my opinion:
\n\nLetting a website know you\u2019re using a screen reader means running around the web waving a red flag that shouts \u201chere, I\u2019m visually impaired or blind!\u201d at anyone who is willing to look. It would take away the one place where we as blind people can be relatively undetected without our white cane or guide dog screaming at everybody around us that we\u2019re blind or visually impaired, and therefore giving others a chance to treat us like true equals.
\n– Marco Zehe
Another accessibility guru L\u00e9onie Watson also wrote a great piece on this topic: Thoughts on screen reader detection. In it she argues that screen reader detection could lead to her and others being directed to text-only versions of sites:
\n\nI don\u2019t want to be relegated to a ghetto. We\u2019ve spent years encouraging people to move away from text-only websites, and with good reason. If there is one thing that history should have taught us by now, it\u2019s that social segregation is a bad idea.
\n– L\u00e9onie Watson
From my own experience, one of the most common questions I get as an accessibility consultant is “Can’t we just create a special site for people with screen readers?” I say that you can’t, and even if you could it would be a really bad idea. Inclusive design is about inclusion, not separation. The problem is that with this new tool from Apple, well-meaning people with this common, but terrible idea of separate “disability-sites” now can implement it, whereas in the past they couldn’t.
\nOther accessibility folks are not impressed either:
\n\n\n\nThis new Accessibility Events feature for VoiceOver in iOS 12.2 might possibly be the worst idea ever (especially as it is enabled by default).
\nSure, let\u2019s give devs ways to identify blind users & serve alternate versions of content. That worked really well in the past. pic.twitter.com/gDTSvQqNKp
\n— Denis Boudreau (@dboudreau) March 27, 2019
\n\n\nIt's been possible in native apps for a while, but now @Apple has enabled disability fingerprinting in Safari on iOS. https://t.co/b7ahixqbke #privacy #fail
\n— L\u00e9onie (@LeonieWatson) March 27, 2019
\n\n\nJesus, that won\u2019t end badly at all. Remember when Amazon deliberately locked voiceover users out of the Alexa portion of their app for months in 2017? Turn this option off at your earliest convenience.apps and websites have no business knowing if you\u2019re using #a11y.
\n— Aaron Howell (@aaronkhowell) March 26, 2019
\n\n\nYikes.. sounds like the perfect excuse to build "accessibility" in exactly the wrong way
\n— Facundo Corradini (@fcorradini) March 26, 2019
I also discussed this accessibility events feature with my\u00a0friend who is a screen reader user herself. She said it feels like it’s a first step towards a well-meant\u00a0digital apartheid. To give you a magnitude of the impact this type of detection might have.
\nFirst I thought users needed to opt-in on the setting. It would still be bad but tolerable. But alas! It’s activated by default! So users who just turn the screen reader on have it enabled. Yes, they can turn it off:
\n\n\n\nHow to disable "Accessibility Events" the VoiceOver and other AT tracking feature on iOS update 12.2 pic.twitter.com/RC5W8a0e1t
\n— Ross Mullen (@MrRossMullen) March 27, 2019
But everyone knows most users will be completely unaware of this feature.
\nThis feature dropped like a bomb on the accessibility community and there’s basically no information out there on it. Nothing in the release notes, nothing on Apple’s site. It just appeared in the accessibility settings, and someone noticed and wrote a short article about it on Apple Vis.
\nMy good friend Kolombiken\u00a0(who writes the best accessibility newsletter out there, you should check it out) went searching for answers in a huge Slack group for accessibility nerds and found nothing:
\n\nI’m soo confused over this new “accessibility events”-thing in iOS. I came here to look for answers but seeing that people here are equally confused. But there must be some documentation somewhere? No?
Apple, you can’t just roll out a feature like this with no information! Come on, this is not like you!
\nI think it’s safe to say that Apple has some serious explanation to do here. Both around the feature and the non-existent documentation around it. Hopefully it’s just a mistake, wasn’t supposed to be rolled out or something similar.
\nUntil that is confirmed though, I think it’s time for the accessibility community to protest rather loudly.
\nYay! Apple has now removed the accessibility event feature, about a month after it was released. All is well and I’m not angry any more!
\nThe post Apple’s new feature a step towards digital apartheid appeared first on Axess Lab.
\n", "content_text": "To be honest, I don’t really have time to write this article. I’ve got loads of other things I should be doing. But it needs to be written. Now. So I’ve popped up my laptop on the bus and am angrily typing away.\n\nSounds so serious…what’s going on?\nSo Apple just released a new accessibility “feature” called accessibility events. Here’s how they explain the feature:\nAccessibility events allow websites to customize their behaviour for assistive technologies, like VoiceOver. Enabling Accessibility Events may reveal whether an assistive technology is active on your iPhone.\nHere it is in action on an iPhone:\n\nSo this feature lets web developers recognise when an assistive technology is active on the user’s device. Sounds great, right? Gives developers a chance to improve the user experience for people with disabilities.\nBut think a step further and you’ll realise that it’s actually a terrible idea.\nWhy?\nWell, accessibility guru and screen reader user Marco Zehe explains it well in his article Why screen reader detection on the web is a bad thing. Here is the most important part in my opinion:\nLetting a website know you\u2019re using a screen reader means running around the web waving a red flag that shouts \u201chere, I\u2019m visually impaired or blind!\u201d at anyone who is willing to look. It would take away the one place where we as blind people can be relatively undetected without our white cane or guide dog screaming at everybody around us that we\u2019re blind or visually impaired, and therefore giving others a chance to treat us like true equals.\n– Marco Zehe\nAnother accessibility guru L\u00e9onie Watson also wrote a great piece on this topic: Thoughts on screen reader detection. In it she argues that screen reader detection could lead to her and others being directed to text-only versions of sites:\nI don\u2019t want to be relegated to a ghetto. We\u2019ve spent years encouraging people to move away from text-only websites, and with good reason. If there is one thing that history should have taught us by now, it\u2019s that social segregation is a bad idea.\n– L\u00e9onie Watson\nFrom my own experience, one of the most common questions I get as an accessibility consultant is “Can’t we just create a special site for people with screen readers?” I say that you can’t, and even if you could it would be a really bad idea. Inclusive design is about inclusion, not separation. The problem is that with this new tool from Apple, well-meaning people with this common, but terrible idea of separate “disability-sites” now can implement it, whereas in the past they couldn’t.\nThe accessibility community is not pleased\nOther accessibility folks are not impressed either:\n\nThis new Accessibility Events feature for VoiceOver in iOS 12.2 might possibly be the worst idea ever (especially as it is enabled by default). \nSure, let\u2019s give devs ways to identify blind users & serve alternate versions of content. That worked really well in the past. pic.twitter.com/gDTSvQqNKp\n— Denis Boudreau (@dboudreau) March 27, 2019\n\n\nIt's been possible in native apps for a while, but now @Apple has enabled disability fingerprinting in Safari on iOS. https://t.co/b7ahixqbke #privacy #fail\n— L\u00e9onie (@LeonieWatson) March 27, 2019\n\n\nJesus, that won\u2019t end badly at all. Remember when Amazon deliberately locked voiceover users out of the Alexa portion of their app for months in 2017? Turn this option off at your earliest convenience.apps and websites have no business knowing if you\u2019re using #a11y.\n— Aaron Howell (@aaronkhowell) March 26, 2019\n\n\nYikes.. sounds like the perfect excuse to build "accessibility" in exactly the wrong way\n— Facundo Corradini (@fcorradini) March 26, 2019\n\nI also discussed this accessibility events feature with my\u00a0friend who is a screen reader user herself. She said it feels like it’s a first step towards a well-meant\u00a0digital apartheid. To give you a magnitude of the impact this type of detection might have.\nAs if things weren’t bad enough…it’s on by default\nFirst I thought users needed to opt-in on the setting. It would still be bad but tolerable. But alas! It’s activated by default! So users who just turn the screen reader on have it enabled. Yes, they can turn it off:\n\nHow to disable "Accessibility Events" the VoiceOver and other AT tracking feature on iOS update 12.2 pic.twitter.com/RC5W8a0e1t\n— Ross Mullen (@MrRossMullen) March 27, 2019\n\nBut everyone knows most users will be completely unaware of this feature.\nThere’s barely any information\nThis feature dropped like a bomb on the accessibility community and there’s basically no information out there on it. Nothing in the release notes, nothing on Apple’s site. It just appeared in the accessibility settings, and someone noticed and wrote a short article about it on Apple Vis.\nMy good friend Kolombiken\u00a0(who writes the best accessibility newsletter out there, you should check it out) went searching for answers in a huge Slack group for accessibility nerds and found nothing:\nI’m soo confused over this new “accessibility events”-thing in iOS. I came here to look for answers but seeing that people here are equally confused. But there must be some documentation somewhere? No?\nApple, you can’t just roll out a feature like this with no information! Come on, this is not like you!\nHopefully this is just a hiccup\nI think it’s safe to say that Apple has some serious explanation to do here. Both around the feature and the non-existent documentation around it. Hopefully it’s just a mistake, wasn’t supposed to be rolled out or something similar.\nUntil that is confirmed though, I think it’s time for the accessibility community to protest rather loudly.\nUpdate\nYay! Apple has now removed the accessibility event feature, about a month after it was released. All is well and I’m not angry any more!\nThe post Apple’s new feature a step towards digital apartheid appeared first on Axess Lab.", "date_published": "2019-03-28T19:24:11+01:00", "date_modified": "2019-05-04T07:58:30+02:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/03/featured-1.png" }, { "id": "https://axesslab.com/accessibility-tshirts/", "url": "https://axesslab.com/accessibility-tshirts/", "title": "Accessibility T-shirts! Look like the a11y nerd you are", "content_html": "It’s well known in the accessibility community that the road to an inclusive digital world is through awareness. And what better way to raise awareness than wearing an awesome, head-turning accessibility t-shirt?
\n![\"Three](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/banner.png\")
Before we begin, you might be wondering how much we get paid to write this post. It’s zero. Zip. Nada. Just hopefully the admiration from other fellow accessibility nerds! So let’s dive in!
\nFlaunt your love for accessibility, cats and puns (alley cats..get it?!😂). Put this on your Tinder profile and you’re good to go!
\n![\"Gray](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/a11y-cats-e1550960053275.jpg\")
Get A11y cats t-shirt on Bonfire
\nThinking about the future is can be scary these days. Finally, you have the chance to spread some positivity!
\n![\"Black](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/future.png\")
Get this future t-shirt on Redbubble
\nYou can get a more sparkling version of the same statement.
\n![\"Pink](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/The-future-is-accessible.jpg\")
Get the sparkling future t-shirt on etsy
\nWe might be a bit partial since we’re based in Sweden, but moose are just irresistible! Almost as irresistible as everyone who’s working with accessibility. Perfect match!
\n![\"Green](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/moose.png\")
Get your moose t-shirt on Teepublic\u00a0(there are also versions on the site with other animals like giraffes and even dinosaurs!)
\nPerfect for walking around the office quizzing colleagues. Do they know where the words come from? If not, send them off to\u00a0accessibility training!
\n![\"Gray](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/wcag.png\")
Get your WCAG t-shirt at Redbubble
\nA superhero t-shirt for all the superheroes working with inclusive design!
\n![\"Yellow](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/batman.png\")
Get your wheelchair batman t-shirt on Teepublic
\nFrom the same independent designer that brought you the Batman design above.
\n![\"Purple](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/wonderwoman.png\")
Get your Wheelchair Wonder Woman t-shirt on Teepublic
\nIt’s not easy to find t-shirts raising awareness of hidden impairments like autism. But luckily we found this one! A great reason to go get it is that “50% or more of the proceeds from this design are donated directly to disabled individuals who are fundraising for a mobility aid or other accessibility device.”
\n![\"Black](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/a11y-matters-e1550960182143.jpg\")
Get the accessibility matters t-shirt at Bonfire
\nVideos lacking closed captions is one of the major accessibility issues on the web. This cc t-shirt gives you a great chance to talk about closed captions with everyone who asks what the “cc” means!
\n![\"Black](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/cc.png\")
Get your cc t-shirt at Redbubble
\nWhile on the topic of hard-of-hearing-awareness, check out this great message in American sign language (ASL).
\n![\"Black](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/sign-language.jpg\")
Get your sign language t-shirt at Amazon
\nFinally, let’s challenge the classic sitting-still-in-a-wheelchair-disability-icon with this great print!
\n![\"Black](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/wheelie.png\")
Get your wheelchair trick t-shirt on Teepublic
\nWhether or not you decide to buy this t-shirt: take a minute of your life to check out the guy who probably inspired it: Aaron “Wheelz” Fotheringham.
\n\nHope you found something to upgrade your wardrobe with, at the same time spreading some accessibility awareness. If you know of any other prints that you think we should add to the article, please tweet us\u00a0and we’ll add them!
\nMeanwhile, if you’d like to dig deeper into digital accessibility, check out our other articles. We guess that if you’ve made your way down here you’d appreciate some of our more nerdy posts. So here are a few of those:
\nThe post Accessibility T-shirts! Look like the a11y nerd you are appeared first on Axess Lab.
\n", "content_text": "It’s well known in the accessibility community that the road to an inclusive digital world is through awareness. And what better way to raise awareness than wearing an awesome, head-turning accessibility t-shirt?\n\nBefore we begin, you might be wondering how much we get paid to write this post. It’s zero. Zip. Nada. Just hopefully the admiration from other fellow accessibility nerds! So let’s dive in!\nA11y cats\nFlaunt your love for accessibility, cats and puns (alley cats..get it?!😂). Put this on your Tinder profile and you’re good to go!\n\nGet A11y cats t-shirt on Bonfire\nThe future is accessible t-shirt\nThinking about the future is can be scary these days. Finally, you have the chance to spread some positivity!\n\nGet this future t-shirt on Redbubble\nYou can get a more sparkling version of the same statement.\n\nGet the sparkling future t-shirt on etsy\nMoose in wheelchair t-shirt\nWe might be a bit partial since we’re based in Sweden, but moose are just irresistible! Almost as irresistible as everyone who’s working with accessibility. Perfect match!\n\nGet your moose t-shirt on Teepublic\u00a0(there are also versions on the site with other animals like giraffes and even dinosaurs!)\nWCAG t-shirt\nPerfect for walking around the office quizzing colleagues. Do they know where the words come from? If not, send them off to\u00a0accessibility training!\n\nGet your WCAG t-shirt at Redbubble\nBatman in wheelchair t-shirt\nA superhero t-shirt for all the superheroes working with inclusive design!\n\nGet your wheelchair batman t-shirt on Teepublic\nWonderwoman in a wheelchair t-shirt\nFrom the same independent designer that brought you the Batman design above.\n\nGet your Wheelchair Wonder Woman t-shirt on Teepublic\nAccessibility matters\nIt’s not easy to find t-shirts raising awareness of hidden impairments like autism. But luckily we found this one! A great reason to go get it is that “50% or more of the proceeds from this design are donated directly to disabled individuals who are fundraising for a mobility aid or other accessibility device.”\n\nGet the accessibility matters t-shirt at Bonfire\nClosed captions t-shirt\nVideos lacking closed captions is one of the major accessibility issues on the web. This cc t-shirt gives you a great chance to talk about closed captions with everyone who asks what the “cc” means!\n\nGet your cc t-shirt at Redbubble\nSign language be kind t-shirt\nWhile on the topic of hard-of-hearing-awareness, check out this great message in American sign language (ASL).\n\nGet your sign language t-shirt at Amazon\nWheelchair trick t-shirt\nFinally, let’s challenge the classic sitting-still-in-a-wheelchair-disability-icon with this great print!\n\nGet your wheelchair trick t-shirt on Teepublic\nWhether or not you decide to buy this t-shirt: take a minute of your life to check out the guy who probably inspired it: Aaron “Wheelz” Fotheringham.\n\nKeep spreading awareness!\nHope you found something to upgrade your wardrobe with, at the same time spreading some accessibility awareness. If you know of any other prints that you think we should add to the article, please tweet us\u00a0and we’ll add them!\nMeanwhile, if you’d like to dig deeper into digital accessibility, check out our other articles. We guess that if you’ve made your way down here you’d appreciate some of our more nerdy posts. So here are a few of those:\n\nDisabled buttons suck\nText splitting causes screen reader problems\nHow to make your site accessible for screen magnifiers\nYour skip links are broken\n\nThe post Accessibility T-shirts! Look like the a11y nerd you are appeared first on Axess Lab.", "date_published": "2019-02-23T23:09:10+01:00", "date_modified": "2019-02-23T23:29:45+01:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/featured-1.png" }, { "id": "https://axesslab.com/axess-lab-just-got-a-5-star-rating-on-clutch/", "url": "https://axesslab.com/axess-lab-just-got-a-5-star-rating-on-clutch/", "title": "Axess Lab just got a 5-Star rating on Clutch", "content_html": "Axess Lab is a team of IT professionals who want to make life easier for everybody. And it seems to be working!
\nAs you may know, we do everything from development projects for everyone to specific digital efforts to help people with a variety of mental and physical disabilities, and we strive to show the world that accessible development only helps, never hurts.
\nIn an effort to further the cause of accessible development, we can now be found on the B2B ratings and reviews platform, Clutch.
![\"Medal](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/clutch-400x400.png\")
Clutch uses in depth market research and verified client reviews to identify top service provider across a number of industries. We are featured on several directories on Clutch, including alongside some of the top software application testing companies in the world. We hope that our increased visibility by joining the platform will help firms find us and consider making their software and services more accessible for everybody.
\n![\"Axess](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/summary.jpg\")
In addition to expanding our visibility, our presence on Clutch helps us gauge how we are performing for our clients. Although our profile has been active for only a short period of time, we already have our first review! When asked what they found impressive about our work on their project, a job matching platform for people with disabilities, our client remarked,
\n\nTheir skills and accessibility are impressive. They\u2019re interested in people, and they take time for everyone involved in the project. There\u2019s always good communication, and they\u2019re nice people.
We care about every project and every person we work with, and we are glad that our clients have taken notice. It is a wonderful feeling to be praised by our clients, but we are even more excited to receive their honest feedback. We may only have one review, but we look forward to using future feedback to help us improve our services.
\nClutch\u2019s sister-site, The Manifest, has also featured us as a top firm. The Manifest is a business resource that helps teams identify and address their business challenges, providing how-to guides and industry insights. We were included on their list of the top web developers in Sweden, cementing our reputation as a reliable partner, and a skilled team of developers. In spite of the praise that we have received, we believe in letting our work speak for itself. We will be posting some of our best projects in a portfolio on Visual Objects, a space for user experience designers and other firms to share their work with potential clients.
\nIt is always exciting to be recognized as a success in your industry, and we are thrilled to be celebrating the recognition we have received from one of our clients. And speaking of our clients, thank you to everyone who has supported us on our journey. We have always wanted to help people, and we cannot express enough gratitude for the help we have received ourselves.
\nHave you worked with us in a development project, or received accessibility reviews or user test analysis? Please give us a review on the Clutch site, and let us know how we’re doing!
\nThe post Axess Lab just got a 5-Star rating on Clutch appeared first on Axess Lab.
\n", "content_text": "Axess Lab is a team of IT professionals who want to make life easier for everybody. And it seems to be working!\nAs you may know, we do everything from development projects for everyone to specific digital efforts to help people with a variety of mental and physical disabilities, and we strive to show the world that accessible development only helps, never hurts.\nIn an effort to further the cause of accessible development, we can now be found on the B2B ratings and reviews platform, Clutch.\nClutch uses in depth market research and verified client reviews to identify top service provider across a number of industries. We are featured on several directories on Clutch, including alongside some of the top software application testing companies in the world. We hope that our increased visibility by joining the platform will help firms find us and consider making their software and services more accessible for everybody.\n\nIn addition to expanding our visibility, our presence on Clutch helps us gauge how we are performing for our clients. Although our profile has been active for only a short period of time, we already have our first review! When asked what they found impressive about our work on their project, a job matching platform for people with disabilities, our client remarked,\nTheir skills and accessibility are impressive. They\u2019re interested in people, and they take time for everyone involved in the project. There\u2019s always good communication, and they\u2019re nice people.\nWe care about every project and every person we work with, and we are glad that our clients have taken notice. It is a wonderful feeling to be praised by our clients, but we are even more excited to receive their honest feedback. We may only have one review, but we look forward to using future feedback to help us improve our services.\nClutch\u2019s sister-site, The Manifest, has also featured us as a top firm. The Manifest is a business resource that helps teams identify and address their business challenges, providing how-to guides and industry insights. We were included on their list of the top web developers in Sweden, cementing our reputation as a reliable partner, and a skilled team of developers. In spite of the praise that we have received, we believe in letting our work speak for itself. We will be posting some of our best projects in a portfolio on Visual Objects, a space for user experience designers and other firms to share their work with potential clients.\nIt is always exciting to be recognized as a success in your industry, and we are thrilled to be celebrating the recognition we have received from one of our clients. And speaking of our clients, thank you to everyone who has supported us on our journey. We have always wanted to help people, and we cannot express enough gratitude for the help we have received ourselves.\nHave you worked with us in a development project, or received accessibility reviews or user test analysis? Please give us a review on the Clutch site, and let us know how we’re doing!\nThe post Axess Lab just got a 5-Star rating on Clutch appeared first on Axess Lab.", "date_published": "2019-02-21T16:23:59+01:00", "date_modified": "2019-02-21T16:23:59+01:00", "author": { "name": "Joel Holmber", "url": "https://axesslab.com/author/mandudeboy/", "avatar": "https://secure.gravatar.com/avatar/34147490ed338765c7ac05d185f5f864?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/02/clutch.png" }, { "id": "https://axesslab.com/real-facts-about-the-elderly-and-the-world-wide-web/", "url": "https://axesslab.com/real-facts-about-the-elderly-and-the-world-wide-web/", "title": "Real Facts about the Elderly and the World Wide Web", "content_html": "There are lots of stereotypes about the elderly and tech or the world wide web. Many portray the over-sixty crowd as being unable to cope with modern tech.
\nBut is this stereotype correct? That\u2019s what Dr. Nikola Djordjevic, from the site medalerthelp.org set out to learn. His team compiled all of the information into a comprehensive infographic and the results may surprise you.
\nWe got their help to break it down into smaller, more manageable pieces and transcribe the contents for our non-visual readers. Let\u2019s go through the stats one by one.
\nSo, in terms of usage, seniors are a lot more active online than you may have suspected.
\n
![\"Infographic,](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/usage.png\")
So, the internet is viewed by many of the elderly as a valuable resource.
\n![\"Infographic,](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/why.png\")
Two-thirds of seniors use the web to access weather and the news.
\n57% shop online.
\n44% want information about food and cooking.
\n43% use it to play games. And, boy, is that breaking a long-held stereotype! Just keep in mind that people who pioneered computers and the internet are now in their sixties, so the generation that started it all is actually quite active.
\nAlmost half go online to check for coupons, daily deals, and discounts.
\n![\"Infographics](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/types.png\")
20% of seniors communicate with their friends via email.
\n75% of the elderly go online to communicate with their family and friends.
\nMore than half of those who are classified as seniors follow an organization on social media.
\n40% of seniors who watch videos online do so in order to keep up to date with breaking news.
\n53% of the elderly research medical or healthcare issues online.
\n54% of seniors watch videos online for purely entertainment purposes.
\nHalf of the seniors say that it\u2019s very important to play games in order to remain sharp. A further 26% state that playing games is extremely important for this reason.
\n![\"infographics](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/what.png\")
Two-thirds of queries that seniors make online are related to medical or health info.
\nComing a close second is visits to federal, state, or local sites.
\nA small percentage of seniors do take classes online, but that\u2019s only about 18%.
\n![\"Infographics](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/categories.png\")
A lot has been said online about Facebook being more popular among older users. As one commentator put it, \u201cFacebook is for the parents, Instagram is for the kids.\u201d The stats seem to bear this out here as well.
\n61% of those aged \u00a050\u201359, prefer Facebook. For the over-sixty category, Facebook still comes out on top with 36% of users using it.
\nCompared to Facebook, the other main social media sites don\u2019t fair very well with seniors.
\nOf the group aged 60 or over, 5% use Instagram, 6% use Twitter, and only 1% use Snapchat.
\n![\"Infographic](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/socialmedia.png\")
For the age group 65 and over, 66% of seniors in the United States go online, and only 10% have smartphones. That\u2019s compared to 87% for those in the \u00a050\u201364 age group, where around 16% of people have a smartphone.
\nThe results also highlighted an interesting phenomenon \u2013 both seniors with and without disabilities used the internet. You would expect the seniors with disabilities to use it more. You\u2019d be wrong.
\nSeniors in the age bracket of 80 years old or more tend to use the internet and smart-tech the least.
\nThe activity that comes out on top on a daily basis for 91% of seniors is to send or read email. 70% of seniors will also run searches at least once a day online.
\nAcross all of the older age groups, cell phones are put to good use. Even in the over eighty category, around about 58% of seniors have cell phones. Smartphone adoption, however, decreases with age.
\nIn terms of smartphone usage across various categories, seniors do account for the smallest numbers, which indicates that they are not as comfortable with smartphones as they are with regular mobile phones.
\nIf you\u2019re aiming to sell to this target group, the conversion rate is highest on the desktop platform at 72%. In this area, seniors come out trumps. Tablets and phones don\u2019t, however, fair nearly as well in terms of conversion rates.
\nWatching TV online is popular with the 50\u201359 age group. Furthermore, around about 63% in this age group access streaming services online.
\n![\"Infographics](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/userstats.png\")
That\u2019s not to say that all seniors do use the internet. 34% of those who are over 65 don\u2019t go online at all. This is a massive difference when you consider that that figure drops to just 3% for those aged 30\u201339.
\n![\"Infographics\"](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/doesntuse.png\")
One of the challenges is poor health or a physical condition that doesn\u2019t allow them to easily access the internet. This affects about two out of five seniors. Almost a quarter of the older generation does not believe in looking online for news, etc. They don\u2019t feel as though they are missing out at all.
\nBut, the most prevalent reason by far, in fact in 77% of cases, is simply the lack of knowledge. They need someone to show them exactly what to do and help them until they get the hang of it. In about another quarter of cases, online harassment is cited as the reason to stay offline. About 22% of those in the United States who are fifty or older have been harassed online before.
\n![\"Infographic](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/whynot.jpg\")
So, there you have it \u2013 have you changed your thinking as far as the elderly and the internet is concerned?
\nURL: https://medalerthelp.org/elderly-the-world-wide-web-infographic/
\nThe post Real Facts about the Elderly and the World Wide Web appeared first on Axess Lab.
\n", "content_text": "There are lots of stereotypes about the elderly and tech or the world wide web. Many portray the over-sixty crowd as being unable to cope with modern tech.\nBut is this stereotype correct? That\u2019s what Dr. Nikola Djordjevic, from the site medalerthelp.org set out to learn. His team compiled all of the information into a comprehensive infographic and the results may surprise you.\nWe got their help to break it down into smaller, more manageable pieces and transcribe the contents for our non-visual readers. Let\u2019s go through the stats one by one.\nUsage\n\nThose of the baby boomer generation spend around 27 hours weekly online.\nOf the group aged over 65, seven out of ten will go online daily.\n82% of those in both groups run searches online related to what they\u2019re interested in.\n\nSo, in terms of usage, seniors are a lot more active online than you may have suspected.\n\nWhy do they use it?\n\n78% of seniors say that they like going online because it enables them to find the information that they need easily.\n60% of them believe that you can stay up to date when it comes to policy and political issues by surfing the web.\nFor around about a third of seniors, the internet is considered a trustworthy source of information and news.\n\nSo, the internet is viewed by many of the elderly as a valuable resource.\n\nThe types of information they access\n\n\nTwo-thirds of seniors use the web to access weather and the news.\n\n\n57% shop online.\n\n\n44% want information about food and cooking.\n\n\n43% use it to play games. And, boy, is that breaking a long-held stereotype! Just keep in mind that people who pioneered computers and the internet are now in their sixties, so the generation that started it all is actually quite active.\n\n\nAlmost half go online to check for coupons, daily deals, and discounts.\n\n\n\nWhat can the internet be used for?\n\n\n20% of seniors communicate with their friends via email.\n\n\n75% of the elderly go online to communicate with their family and friends.\n\n\nMore than half of those who are classified as seniors follow an organization on social media.\n\n\n40% of seniors who watch videos online do so in order to keep up to date with breaking news.\n\n\n53% of the elderly research medical or healthcare issues online.\n\n\n54% of seniors watch videos online for purely entertainment purposes.\n\n\nHalf of the seniors say that it\u2019s very important to play games in order to remain sharp. A further 26% state that playing games is extremely important for this reason.\n\n\n\nInternet usage by category\n\n\nTwo-thirds of queries that seniors make online are related to medical or health info.\n\n\nComing a close second is visits to federal, state, or local sites.\n\n\nA small percentage of seniors do take classes online, but that\u2019s only about 18%.\n\n\n\nSocial media usage\n\n\nA lot has been said online about Facebook being more popular among older users. As one commentator put it, \u201cFacebook is for the parents, Instagram is for the kids.\u201d The stats seem to bear this out here as well.\n\n\n61% of those aged \u00a050\u201359, prefer Facebook. For the over-sixty category, Facebook still comes out on top with 36% of users using it.\n\n\nCompared to Facebook, the other main social media sites don\u2019t fair very well with seniors.\n\n\nOf the group aged 60 or over, 5% use Instagram, 6% use Twitter, and only 1% use Snapchat.\n\n\n\nSome general statistics\n\n\nFor the age group 65 and over, 66% of seniors in the United States go online, and only 10% have smartphones. That\u2019s compared to 87% for those in the \u00a050\u201364 age group, where around 16% of people have a smartphone.\n\n\nThe results also highlighted an interesting phenomenon \u2013 both seniors with and without disabilities used the internet. You would expect the seniors with disabilities to use it more. You\u2019d be wrong.\n\n\nSeniors in the age bracket of 80 years old or more tend to use the internet and smart-tech the least.\n\n\nThe activity that comes out on top on a daily basis for 91% of seniors is to send or read email. 70% of seniors will also run searches at least once a day online.\n\n\nAcross all of the older age groups, cell phones are put to good use. Even in the over eighty category, around about 58% of seniors have cell phones. Smartphone adoption, however, decreases with age.\n\n\nIn terms of smartphone usage across various categories, seniors do account for the smallest numbers, which indicates that they are not as comfortable with smartphones as they are with regular mobile phones.\n\n\nIf you\u2019re aiming to sell to this target group, the conversion rate is highest on the desktop platform at 72%. In this area, seniors come out trumps. Tablets and phones don\u2019t, however, fair nearly as well in terms of conversion rates.\n\n\nWatching TV online is popular with the 50\u201359 age group. Furthermore, around about 63% in this age group access streaming services online.\n\n22% of disabled adults in the UK have never used the internet.\n\n\nWho doesn\u2019t use the internet?\nThat\u2019s not to say that all seniors do use the internet. 34% of those who are over 65 don\u2019t go online at all. This is a massive difference when you consider that that figure drops to just 3% for those aged 30\u201339.\n\nWhy don\u2019t some seniors use the internet?\nOne of the challenges is poor health or a physical condition that doesn\u2019t allow them to easily access the internet. This affects about two out of five seniors. Almost a quarter of the older generation does not believe in looking online for news, etc. They don\u2019t feel as though they are missing out at all.\nBut, the most prevalent reason by far, in fact in 77% of cases, is simply the lack of knowledge. They need someone to show them exactly what to do and help them until they get the hang of it. In about another quarter of cases, online harassment is cited as the reason to stay offline. About 22% of those in the United States who are fifty or older have been harassed online before.\n\nSo, there you have it \u2013 have you changed your thinking as far as the elderly and the internet is concerned?\nURL: https://medalerthelp.org/elderly-the-world-wide-web-infographic/\nThe post Real Facts about the Elderly and the World Wide Web appeared first on Axess Lab.", "date_published": "2019-01-23T06:22:24+01:00", "date_modified": "2019-01-23T08:38:53+01:00", "author": { "name": "Joel Holmber", "url": "https://axesslab.com/author/mandudeboy/", "avatar": "https://secure.gravatar.com/avatar/34147490ed338765c7ac05d185f5f864?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/usage.png" }, { "id": "https://axesslab.com/axessified-instagram/", "url": "https://axesslab.com/axessified-instagram/", "title": "Instagram \u2013 You\u2019ve been Axessified!", "content_html": "Hi Instagram! We’re thrilled to see you’re improving your accessibility by making it possible to write alt-texts for images. As a token of appreciation, we’ve made you part of our Axessified-series! This means you get some top-notch, tailored inclusive design tips to help you take the next step on your accessibility journey!
\n![\"Instagram's](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/banner.jpg\")
There’s rightfully been a lot of praise from the accessibility community about Instagram’s new alt-text features. Now, an Artificial Intelligence (AI) engine gives each image an automatic alt-text, and also makes it possible for user’s to improve that image description by writing custom alt-texts.
\nThis is simply awesome, making one of the most popular social media platforms so much more inclusive to people with visual impairments.\u00a0We see this as a sign that you’re interested in making Instagram more inclusive for users with visual impairments.
\nSo Instagram: don’t stop now, keep moving forward! Here are three tips on what we think should be your next accessibility improvements for users with visual impairments..
\nIn the feed, sometimes you show a more-button when a description is too long to be displayed.
\n![\"More](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/12/more.png\")
This button is completely inaccessible for screen reader users like myself (if you aren’t familiar with screen readers, here’s a great 7 minute introductory video on YouTube: Assistive tech: VoiceOver on iOS).
\nThe more-button is actually read by screen readers \u2013 a great start! But the problem is that there is no way to activate it. When you try to click it, you’re redirected to the user’s profile page. Not at all what you’d expect! Here’s a video when I show this in action:
\n\nFirst off, a short sidetrack. Did you notice the great start of the video: “Image may contain text that says Accessibility is for everyone.” This is the new AI-engine in action, making image of text accessible to screen readers. Whoopee!
\nBut later in the video the screen reader reads half a sentence and then the word “More”, like this: “I think that’s a…More”. When I click I land on the profile page’s back button, instead of having the description show.
\nTo solve this conundrum, you can do one of two things:
\nOf these two solutions, we’d recommend you to go for number 2!
\nWhen viewing Instagram stories, basically nothing works for me and other screen reader users. To navigate Stories you tell us to press and hold to pause, tap to continue to the next story and so on.
\n![\"A](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/12/Stories.jpg\")
So I don’t get any content read to me. But the worst thing is that I can’t pause the slideshow. If you have a vision impairment like me, you need to be able to pause the stories to have time to look closely at the screen (yes, most people with visual impairments still see a little bit), zoom in, read alt-texts and so on. Now each story just swishes by too quickly.
\nTo make things even worse, I often use an iOS\u00a0 built-in zooming feature where you tap with three fingers to zoom in to images, which works poorly in Instagram Stories. So what I’ll do is turn off the screen reader when entering Stories, and instead rely on zooming and my limited vision. But the problem is that tapping with three fingers in Stories is often registered by the app as a single tap, which switches to the next story. Really frustrating!
\nSo to conclude, right now Instagram Stories is a bit of a mess for a lot of users with vision impairments. A simple fix would be to include a setting or a pause button that disables the autoplay feature and instead gives users control of when to switch to the next story.
\nThis last one is not a “show-stopper” for screen reader users like the two earlier sections. However, it is an easy fix that would improve the overall user experience and make it more pleasant to spend time in your app. You can compare this issue to having visually ugly icons. You could still use the interface, but it would feel unprofessional.
\nSo the problem is that many of your icons are read as something like:
\n“Ig icon direct outline 24 direct message”
\n“Ig icon more horizontal outline”
\n“Ig icon x outline 24”
\nThat’s probably the file name of the icons, which is not something your users should be exposed to.
\nHere’s a video of that experience with my screen reader.
\n\nSo even though each icon’s description contains the meaning of the icon, it’s hidden between a bunch of nonsense. It’s like being forced to play a game of Where’s Waldo…
\nLuckily, this is something that should take you a matter of minutes to fix. So a really low hanging fruit! Yay!
\nWe have a lot of other input and ideas, but let’s start with these issues. Remember to give yourself a pat on the back when your done! Then take the next step. Accessibility is not something you do once and then are done with. Just like you’re never done with usability or performance improvements. Always strive to take small steps forward. Everywhere. All the time.
\nBut do contact us\u00a0if you want us to elaborate on this post and help out. There are a lot of tools you can use to catch these errors before they are in production.
\nThis was the first post in our Axessified-series where we give accessibility tips to teams behind important digital products that affect the life of many.
\nAccessibility tips for specific products is something we usually charge for, and it’s a big part of how we make our living as a company. But the sites and apps we look at in this series have such a big impact on so many users that we want to share these tips free of charge in hope that they\u00a0reach the product teams, and inspires them to make their products more inclusive. Hopefully it also gives some nice insight to all readers on how to succeed with accessibility.
\nWhich service do you think we should check out next? Tweet us\u00a0or send an email to hello@axesslab.com.
\nThe post Instagram \u2013 You’ve been Axessified! appeared first on Axess Lab.
\n", "content_text": "Hi Instagram! We’re thrilled to see you’re improving your accessibility by making it possible to write alt-texts for images. As a token of appreciation, we’ve made you part of our Axessified-series! This means you get some top-notch, tailored inclusive design tips to help you take the next step on your accessibility journey!\n\nFirst off \u2013 we really like you!\nThere’s rightfully been a lot of praise from the accessibility community about Instagram’s new alt-text features. Now, an Artificial Intelligence (AI) engine gives each image an automatic alt-text, and also makes it possible for user’s to improve that image description by writing custom alt-texts.\nThis is simply awesome, making one of the most popular social media platforms so much more inclusive to people with visual impairments.\u00a0We see this as a sign that you’re interested in making Instagram more inclusive for users with visual impairments.\nSo Instagram: don’t stop now, keep moving forward! Here are three tips on what we think should be your next accessibility improvements for users with visual impairments..\nTip 1 of 3: The more-button\nIn the feed, sometimes you show a more-button when a description is too long to be displayed.\n\nThis button is completely inaccessible for screen reader users like myself (if you aren’t familiar with screen readers, here’s a great 7 minute introductory video on YouTube: Assistive tech: VoiceOver on iOS).\nThe more-button is actually read by screen readers \u2013 a great start! But the problem is that there is no way to activate it. When you try to click it, you’re redirected to the user’s profile page. Not at all what you’d expect! Here’s a video when I show this in action:\n\nFirst off, a short sidetrack. Did you notice the great start of the video: “Image may contain text that says Accessibility is for everyone.” This is the new AI-engine in action, making image of text accessible to screen readers. Whoopee!\nBut later in the video the screen reader reads half a sentence and then the word “More”, like this: “I think that’s a…More”. When I click I land on the profile page’s back button, instead of having the description show.\nTo solve this conundrum, you can do one of two things:\n\nYou probably already figured this first one out:\nMake the more-button clickable.\nGet inspired by your best buddy: Facebook. There, the whole description is read by the screen reader even if it’s collapsed visually. Meaning screen reader users don’t need to click the more-button to hear the full text. Super convenient!\n\nOf these two solutions, we’d recommend you to go for number 2!\nTip 2 of 3: Stories\nWhen viewing Instagram stories, basically nothing works for me and other screen reader users. To navigate Stories you tell us to press and hold to pause, tap to continue to the next story and so on.\nBut you see, with a screen reader activated, none of those gestures work in Stories. Everywhere I try to click on the screen I just hear a sound telling me that there’s nothing there to click. Here’s a video of me trying my best to click anything at all on the screen, and failing. All I can focus on are a few icons on the screen, but no content.\n\nSo I don’t get any content read to me. But the worst thing is that I can’t pause the slideshow. If you have a vision impairment like me, you need to be able to pause the stories to have time to look closely at the screen (yes, most people with visual impairments still see a little bit), zoom in, read alt-texts and so on. Now each story just swishes by too quickly.\nTo make things even worse, I often use an iOS\u00a0 built-in zooming feature where you tap with three fingers to zoom in to images, which works poorly in Instagram Stories. So what I’ll do is turn off the screen reader when entering Stories, and instead rely on zooming and my limited vision. But the problem is that tapping with three fingers in Stories is often registered by the app as a single tap, which switches to the next story. Really frustrating!\nSo to conclude, right now Instagram Stories is a bit of a mess for a lot of users with vision impairments. A simple fix would be to include a setting or a pause button that disables the autoplay feature and instead gives users control of when to switch to the next story.\nTip 3 of 3: Naming of your icons\nThis last one is not a “show-stopper” for screen reader users like the two earlier sections. However, it is an easy fix that would improve the overall user experience and make it more pleasant to spend time in your app. You can compare this issue to having visually ugly icons. You could still use the interface, but it would feel unprofessional.\nSo the problem is that many of your icons are read as something like:\n“Ig icon direct outline 24 direct message”\n“Ig icon more horizontal outline”\n“Ig icon x outline 24”\nThat’s probably the file name of the icons, which is not something your users should be exposed to.\nHere’s a video of that experience with my screen reader.\n\nSo even though each icon’s description contains the meaning of the icon, it’s hidden between a bunch of nonsense. It’s like being forced to play a game of Where’s Waldo…\nLuckily, this is something that should take you a matter of minutes to fix. So a really low hanging fruit! Yay!\nThat’s enough for now!\nWe have a lot of other input and ideas, but let’s start with these issues. Remember to give yourself a pat on the back when your done! Then take the next step. Accessibility is not something you do once and then are done with. Just like you’re never done with usability or performance improvements. Always strive to take small steps forward. Everywhere. All the time.\nBut do contact us\u00a0if you want us to elaborate on this post and help out. There are a lot of tools you can use to catch these errors before they are in production.\nWho’s next?\nThis was the first post in our Axessified-series where we give accessibility tips to teams behind important digital products that affect the life of many.\nAccessibility tips for specific products is something we usually charge for, and it’s a big part of how we make our living as a company. But the sites and apps we look at in this series have such a big impact on so many users that we want to share these tips free of charge in hope that they\u00a0reach the product teams, and inspires them to make their products more inclusive. Hopefully it also gives some nice insight to all readers on how to succeed with accessibility.\nWhich service do you think we should check out next? Tweet us\u00a0or send an email to hello@axesslab.com.\nThe post Instagram \u2013 You’ve been Axessified! appeared first on Axess Lab.", "date_published": "2019-01-03T15:57:58+01:00", "date_modified": "2019-01-23T07:01:47+01:00", "author": { "name": "DanielGoransson", "url": "https://axesslab.com/author/danielgoransson/", "avatar": "https://secure.gravatar.com/avatar/d276c4825491378b09d00085946cc412?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2019/01/square-1.jpg" }, { "id": "https://axesslab.com/scotland/", "url": "https://axesslab.com/scotland/", "title": "Slides from Accessibility Scotland", "content_html": "Hey Accessibility Scotland! I like you guys even though you invented golf…
\n![\"Scotland](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/11/flag-banner.png\")
Here are the slides from my talk:
\nHave you tried to dab some coconut oil on your spine (PowerPoint on Dropbox)
Enjoy!
\nAnd while you’re here, you might as well check out our other articles on accessibility.
\nThe post Slides from Accessibility Scotland appeared first on Axess Lab.
\n", "content_text": "Hey Accessibility Scotland! I like you guys even though you invented golf…\n\nHere are the slides from my talk:\nHave you tried to dab some coconut oil on your spine (PowerPoint on Dropbox)\nEnjoy!\nAnd while you’re here, you might as well check out our other articles on accessibility.\nThe post Slides from Accessibility Scotland appeared first on Axess Lab.", "date_published": "2018-11-08T12:03:16+01:00", "date_modified": "2018-11-08T19:27:51+01:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/11/flag.png" }, { "id": "https://axesslab.com/accessible-comics/", "url": "https://axesslab.com/accessible-comics/", "title": "Accessible Comics", "content_html": "A lot of the accessibility initiatives today are focused on web sites and apps. But there’s of course more to the digital world than that. In this article we’ll look at a case where a team has done great work to make their digital comic accessible to people with visual impairments.
\n![\"Comic](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/07/banner-1.png\")
Imagine a blind person.
\nWhat image pops up in your head?
\nIs it a young person? Is the person at their work? Doing sports? At the cinema? Buying an Apple Watch? Reading a comic? Probably not.
\nThere are many preconceived ideas out there about what people with disabilities do, or rather don’t do. If you don’t have a visual impairment yourself or some blind friends, you probably don’t think of blind people in the above situations. Most people tend to think of an old person with a cane, not doing much. Which of course is a problem that for instance affects how people are treated, job recruitment and which products are made accessible.
\nSo we need to get more people to see people with disabilities as a diverse group with all sorts of jobs, interests and hobbies. And we need to get more people to understand that their users have disabilities, which is what the article “Our users have no disabilities” is all about.
\nWith this in mind, I was pleasantly surprised when the team behind a comic contacted us, asking for advice on the style of alt-texts for their comic: 100 Demon Dialogues.
\nSidenote: this might seem like a sponsored article, but it’s not. We’re just thrilled to see the great job this team has done and want to share it with you!
\nMost people would never think about making a comic accessible for people with visual impairments. After all, comics are very visual.
\n![\"Three](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/07/img_0433.jpg\")
But the author Lucy Bellwood \u2013 in the image above \u2013 is more inclusive than most people. She wanted to make her comic accessible to comic lovers with visual impairments as well, and brought a team together to get it done. So they asked us to review a couple of alt-texts they had written. It turned out that they’d already grasped the concept very well so our advice was basically: “Great job, keep doing what you’re doing. And can we write about this when it’s out?”
\nAnd now the comic is out. We tested it with a screen reader \u2013 an assistive technology that speaks alt-texts to the user \u2013 and the experience is awesome.
\nSo below are two short, short videos.
\nIt’s so great seeing people making their products accessible, especially when barely anyone else in their field are doing it. Hopefully it motivates more people to do the same thing and opens more people’s minds as to the diverse interests of people with disabilities!
\nIf you’re as happy with this initiative as we are please spread the word about this and give the author Lucy Bellwood (@LuBellWoo) and her team with Kate Brednow, Andy McMillan (@andymcmillan) and Jason Alderman (@justsomeguy) a shoutout on Twitter.
\nI also strongly recommend the Tumblr A11y Wins \u2013 a site that’s dedicated to showcasing positive accessibility examples.
\nIf you want to check out the comic, you can find it in the following places:
\n\nThe post Accessible Comics appeared first on Axess Lab.
\n", "content_text": "A lot of the accessibility initiatives today are focused on web sites and apps. But there’s of course more to the digital world than that. In this article we’ll look at a case where a team has done great work to make their digital comic accessible to people with visual impairments.\n\nLet’s start with a small experiment!\nImagine a blind person.\nWhat image pops up in your head?\nIs it a young person? Is the person at their work? Doing sports? At the cinema? Buying an Apple Watch? Reading a comic? Probably not.\nThere are many preconceived ideas out there about what people with disabilities do, or rather don’t do. If you don’t have a visual impairment yourself or some blind friends, you probably don’t think of blind people in the above situations. Most people tend to think of an old person with a cane, not doing much. Which of course is a problem that for instance affects how people are treated, job recruitment and which products are made accessible.\nSo we need to get more people to see people with disabilities as a diverse group with all sorts of jobs, interests and hobbies. And we need to get more people to understand that their users have disabilities, which is what the article “Our users have no disabilities” is all about.\nMaking a comic accessible\nWith this in mind, I was pleasantly surprised when the team behind a comic contacted us, asking for advice on the style of alt-texts for their comic: 100 Demon Dialogues.\nSidenote: this might seem like a sponsored article, but it’s not. We’re just thrilled to see the great job this team has done and want to share it with you!\nMost people would never think about making a comic accessible for people with visual impairments. After all, comics are very visual.\n\nBut the author Lucy Bellwood \u2013 in the image above \u2013 is more inclusive than most people. She wanted to make her comic accessible to comic lovers with visual impairments as well, and brought a team together to get it done. So they asked us to review a couple of alt-texts they had written. It turned out that they’d already grasped the concept very well so our advice was basically: “Great job, keep doing what you’re doing. And can we write about this when it’s out?”\nAnd now the comic is out. We tested it with a screen reader \u2013 an assistive technology that speaks alt-texts to the user \u2013 and the experience is awesome.\nSo below are two short, short videos.\n\nAn inaccessible experience of a regular comic where the screen reader just says “Background” when it tries to read the content.\nThe accessible 100 Demon Diaries comic that reads the well crafted alt-texts, which both explain what’s happening visually in the comic and what’s written in text.\n\n\n\nIt’s so great seeing people making their products accessible, especially when barely anyone else in their field are doing it. Hopefully it motivates more people to do the same thing and opens more people’s minds as to the diverse interests of people with disabilities!\nIf you’re as happy with this initiative as we are please spread the word about this and give the author Lucy Bellwood (@LuBellWoo) and her team with Kate Brednow, Andy McMillan (@andymcmillan) and Jason Alderman (@justsomeguy) a shoutout on Twitter.\nI also strongly recommend the Tumblr A11y Wins \u2013 a site that’s dedicated to showcasing positive accessibility examples.\nIf you want to check out the comic, you can find it in the following places:\n\nSearch for “100 demon dialogues” in iBooks.\nAmazon\nGumroad\n\nThe post Accessible Comics appeared first on Axess Lab.", "date_published": "2018-08-07T10:47:48+02:00", "date_modified": "2018-08-11T09:27:01+02:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/featured-3.png" }, { "id": "https://axesslab.com/lgbtq-inclusive-web-design/", "url": "https://axesslab.com/lgbtq-inclusive-web-design/", "title": "LGBTQ-inclusive web design", "content_html": "It’s pride week here in Stockholm, Sweden! So we thought we’d celebrate by sharing a few tips on how to create a LGBTQ-inclusive digital environment.
\n![\"Computer](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/banner.png\")
Here at Axess Lab we specialise in accessibility and inclusive design \u2013 which is about making sure as many people as possible feel great about using your products and services. \u00a0Accessibility and inclusive design is often focused on people with disabilities, but let’s look at two concrete things you can do to make your digital products awesome from a pride perspective!
\nMany forms include a question about the user’s gender.
\n![\"Two](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/radio.png\")
Do you really need to know this information? If the answer isn’t a clear “yes”, then the best idea is probably to just remove it. A lot of services ask for users’ gender without really needing it. Simply not asking for gender is great because of a few reasons:
\nIf, however, you really need gender information you can ask for the information in an inclusive way.
\nThe examples below are from the article Designing forms for gender diversity and inclusion by Sabrina Fonseca and the talk All inclusive design – excluding no gender by Sara Ler\u00e9n (@HeedTheNeed).
\nThe first step that many have already adapted is to add an alternative for “Other”. This is better \u2013 or should I say “less bad” \u2013 than the binary “Male/female”. But people who identify as male or female get their own categories while everyone else are mashed together to “other”. We can do better!
\n![\"Radiobuttons](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/other-e1533201552163.png\")
Sometimes the simplest solutions are the best: a custom input field where the user can type whatever they want. Also note how you can explain why you need the gender information below the field.
\n![\"Input](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/gender-input.png\")
You could include a custom input field after a male and female radio buttons, like this:
\n![\"Male,](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/other3.png\")
Including a “Rather not say”, like in the example below, is great as well. It gives people the chance to skip the field, and many who identify as something other than male or female are extra cautious about sharing that information online. Seeing the huge problems with for example transphobia around the world, everyone will not want their gender identity registered in some online database. Combine the “Rather not say” alternative with a custom input field, and you’ve come a long way with little effort!
\n![\"Input](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/other2.png\")
If you want to go all-in, check out Facebook. They’ve done a lot of work with their gender questions. There’s a huge list of gender identity “tags” to choose from, and if you don’t find the correct one you can add to the list yourself. Also, they ask for your preferred pronoun, making it possible to prefer a gender neutral pronoun with examples on how it will be used: “Wish them a happy birthday”.
\n![\"Facebook](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/facebook.png\")
Our second tip to becoming more LGBTQ-friendly is to work with your images and illustrations.
\nA lot of people can rarely or never identify with the people that are represented in images or illustrations on websites, social media and the like. What you choose to display there says a lot about who your target audience is, so make sure it’s as diverse as possible to feel relevant to all your potential users.
\nBreak as many norms as possible in your imagery. Show women playing sport, men taking care of kids, a person in a wheelchair coding, a family with two dads and so on. And make sure not everyone in your images are white.
\nBelow are some great examples of inclusive images you can get inspired by.
\nThe Swedish army fight for LGBTQ-rights:
\n![\"Person](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/rep.jpg\")
Facebook shows icons of two men instead of a man and a woman when two men get married:
\n![\"Facebook](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/representation3.png\")
I recommend everyone to check out this Swedish guide: Images that change the world. Even if you don’t know Swedish, just flip through the guide and look at the great images, you’ll get the point!
\nHere’s one of the images featured in it, pointing out that older LGBTQ-couples are extremely rare to see in images.
\n![\"Two](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/repr2.png\")
Here’s a great banner image on St\u00e5ng\u00e5staden a Swedish site for renting apartments:
\n![\"Top](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/repret.png\")
The Swedish youth clinic site has some awesome, inclusive illustrations on their site. The great thing about the one below is that it’s on a page about friendship. It’s not on a page about dating with disabilities. So they picked an inclusive image without making a point of it. This is a great way to help widen the norms we live by.
\n![\"Black](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/v\u00e4nskap.png\")
Sometimes it can be difficult to find inclusive images, especially on regular stock photography sites. But luckily Jenny Hellenberg (@jenhell) shared some good tips with me, so here are some great places to look for images with diversity:
\n![\"Screenshot](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/2020.png\")
Hope this inspired you to keep improving your inclusive design!
\nHappy pride everyone!
The post LGBTQ-inclusive web design appeared first on Axess Lab.
\n", "content_text": "It’s pride week here in Stockholm, Sweden! So we thought we’d celebrate by sharing a few tips on how to create a LGBTQ-inclusive digital environment.\n\nHere at Axess Lab we specialise in accessibility and inclusive design \u2013 which is about making sure as many people as possible feel great about using your products and services. \u00a0Accessibility and inclusive design is often focused on people with disabilities, but let’s look at two concrete things you can do to make your digital products awesome from a pride perspective!\n1. The gender question\nMany forms include a question about the user’s gender.\n\nDo you really need to know this information? If the answer isn’t a clear “yes”, then the best idea is probably to just remove it. A lot of services ask for users’ gender without really needing it. Simply not asking for gender is great because of a few reasons:\n\nYou reduce the length of your form by one field. And it’s a fact that reducing the number of form fields increases conversion rates (searchenginepeople.com)\nYour users don’t start questioning your intents. A lot of companies ask for gender information to be able to send you specific marketing. Many users know this and get suspicious.\nYou don’t risk excluding users who has another gender identity than the ones you specify.\n\nIf, however, you really need gender information you can ask for the information in an inclusive way.\nThe examples below are from the article Designing forms for gender diversity and inclusion by Sabrina Fonseca and the talk All inclusive design – excluding no gender by Sara Ler\u00e9n (@HeedTheNeed).\nThe first step that many have already adapted is to add an alternative for “Other”. This is better \u2013 or should I say “less bad” \u2013 than the binary “Male/female”. But people who identify as male or female get their own categories while everyone else are mashed together to “other”. We can do better!\n\nSometimes the simplest solutions are the best: a custom input field where the user can type whatever they want. Also note how you can explain why you need the gender information below the field.\n\nYou could include a custom input field after a male and female radio buttons, like this:\n\nIncluding a “Rather not say”, like in the example below, is great as well. It gives people the chance to skip the field, and many who identify as something other than male or female are extra cautious about sharing that information online. Seeing the huge problems with for example transphobia around the world, everyone will not want their gender identity registered in some online database. Combine the “Rather not say” alternative with a custom input field, and you’ve come a long way with little effort!\n\nIf you want to go all-in, check out Facebook. They’ve done a lot of work with their gender questions. There’s a huge list of gender identity “tags” to choose from, and if you don’t find the correct one you can add to the list yourself. Also, they ask for your preferred pronoun, making it possible to prefer a gender neutral pronoun with examples on how it will be used: “Wish them a happy birthday”.\n\n2. Choose inclusive images and illustrations\nOur second tip to becoming more LGBTQ-friendly is to work with your images and illustrations.\nA lot of people can rarely or never identify with the people that are represented in images or illustrations on websites, social media and the like. What you choose to display there says a lot about who your target audience is, so make sure it’s as diverse as possible to feel relevant to all your potential users.\nBreak as many norms as possible in your imagery. Show women playing sport, men taking care of kids, a person in a wheelchair coding, a family with two dads and so on. And make sure not everyone in your images are white.\nBelow are some great examples of inclusive images you can get inspired by.\nThe Swedish army fight for LGBTQ-rights:\n\nFacebook shows icons of two men instead of a man and a woman when two men get married:\n\nI recommend everyone to check out this Swedish guide: Images that change the world. Even if you don’t know Swedish, just flip through the guide and look at the great images, you’ll get the point!\nHere’s one of the images featured in it, pointing out that older LGBTQ-couples are extremely rare to see in images.\n\nHere’s a great banner image on St\u00e5ng\u00e5staden a Swedish site for renting apartments:\n\nThe Swedish youth clinic site has some awesome, inclusive illustrations on their site. The great thing about the one below is that it’s on a page about friendship. It’s not on a page about dating with disabilities. So they picked an inclusive image without making a point of it. This is a great way to help widen the norms we live by.\n\nSometimes it can be difficult to find inclusive images, especially on regular stock photography sites. But luckily Jenny Hellenberg (@jenhell) shared some good tips with me, so here are some great places to look for images with diversity:\n\n\nLGBT section at Twenty20\u00a0(the screenshot above is from this site)\nUnsplash (free)\nTetraimages\nPhotoability\nGetty images lean in collection\nNatural Woman Photos\n\nHope this inspired you to keep improving your inclusive design!\nHappy pride everyone!\nThe post LGBTQ-inclusive web design appeared first on Axess Lab.", "date_published": "2018-08-02T16:29:27+02:00", "date_modified": "2019-03-08T12:01:09+01:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/08/featured-1.png" }, { "id": "https://axesslab.com/skip-links/", "url": "https://axesslab.com/skip-links/", "title": "Your skip links are broken", "content_html": "Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.
\n![\"Button](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/06/skipbanner2.png\")
Skip links are a common accessibility feature on websites. They are simply shortcuts to important parts of the webpage that makes it easier and quicker for some users \u2013 especially users with disabilities \u2013 to find their way around.
\nSkip links are usually hidden visually by default and appear when users navigate to them using the tab key on their keyboard. “Who would ever use a keyboard to navigate?” you may ask yourself. Well, lots of people actually! For instance many users with motor or sight impairments will rely on keyboard navigation. But more on the use cases under the next heading.
\nIf you want to try out a skip link using your laptop, go to Starbuck’s website and press the tab key after you have entered the site.
\nHere’s an attempt at illustrating what happens.\u00a0
![\"Starbucks](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/06/skip.png\")
So when you “tab into” the site the skip link appears, and you can activate it with the Enter key to skip to where it points. On Starbuck’s site you can (in theory) skip to either the main navigation, content or footer.
\nSkip links work well on desktop. Here’s a short video where I’m using them on a few sites with the VoiceOver screen reader on Mac. It might be a bit difficult to follow along if you’re unused to hearing a screen reader in action, and to make things worse mine switches between Swedish and English. But the important thing to notice is how the focus indicator jumps into the content area after I press the skip links:
\n\nSkip links are great when they work, and this type of functionality is recommended in the Web Content Accessibility Guidelines (WCAG):
\n\n2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
\n\u2013 WCAG 2.1
Skip links are mainly used by:
\nInstead of having to spend time tabbing through the logotype, links in the header, menu, etcetera, on each page you visit, skip links provide a handy shortcut to jump straight to what you’re after.
\nThey’re also quite popular among users. In the latest Web AIM screen reader user survey \u2013 which almost 1800 people responded to \u2013\u00a0over 30% said they always or often use skip links when they are present.
\nWe’ve seen in user tests that skip links are even more used by novice screen reader users. Tech savvy users tend to use shortcuts on their keyboard or special gestures to skip between different parts of the page. But less “techy” users are not always aware of those features, and will instead often use the skip link to find their way to the main content.
\nWe became aware of a major issue with skip links after seeing it in two user tests a few months apart, where two different screen reader users struggled with the same type of problem on two different websites.
\nOne of our clients was kind enough to let us share a video clip from their user test in this article. So thanks, Council of the European Union, for that ❤️. The user in the test has also given us her consent to spread this video.
\nSo take a look at this clip (sorry for the blurry start), then we’ll tear apart exactly what’s happening.
\n\nSo in the clip we see a screen reader user trying to use the skip link with her iPhone. This is what happens:
\nWe started investigating the problem and found the same issue on every single skip link we tested. You can try it yourself if you know how to use the screen reader on your smartphone at these sites:
\n\nOr just check out this video where we try to use skip links with VoiceOver on an iPhone on the sites above. You’ll see the sites scrolling, but as soon as we swipe the screen to go to the next item, we’re back at the top of the page.
\n\nSkip links are almost always constructed in the same way. They are simply anchor links pointing to a part of the page like <main>. Something like this:
\n<a href="#skip-here">Skip to main content</a>\n\n//Menu and other stuff users might want to skip\n\n<main id="skip-here">\n...\nFor some reason, these simple anchor links don’t work as intended on iOS. We tried in Safari, Firefox and Chrome \u2013 all have the same issue.
\nTo be clear, this problem exist on mobile when the user navigates by swiping to go from one object to the next. There is another way of navigating (explore by touch \u2013 moving your finger over objects on the screen), and then it works fine on iOS.\u00a0
Regular skip links don’t work with VoiceOver on iOS as shown above. Sadly they don’t work with Android’s screen reader TalkBack either, but this time it’s not the anchor link that’s causing the problems.
\nIn Talkback, skip links don’t even show up when the screen reader focuses on them. Here’s a video where you’ll\u00a0hear the skip link being announced, but it’s not showing on the screen like in iOS. We try to activate the link when it’s announced, but nothing happens.
\n\nThis is caused by a bug in Android that stops the focus event from being triggered. It’s probably easiest to understand if you look at this video comparing what happens when tabbing on desktop, using VoiceOver on iOS and using TalkBack on Android. You’ll see that when tabbing on desktop or using an iOS screen reader, the focused links turn orange. On Android, you never see the orange focus style.
\n\nFor some reason, Android doesn’t trigger the CSS focus event with TalkBack. This is the reason skip links never show up visually on Android, since they are programmed to show up when they receive focus. This is a bug reported to Google, so hopefully they’ll fix it soon.
\nBut shouldn’t it still be possible to use the link, even though it’s visually hidden? Sadly, that’s not possible. If you click on a hidden link with TalkBack, the link will not be activated. So, we guess that Google will need to fix this focus issue before skip links will work at all on Android.
\nInteresting enough, some Android phones have a version of TalkBack called VoiceAssistant. With VoiceAssistant, skip links work exactly as intended!
\nSolving this bug is mostly up to browser and screen reader vendors. So we hope you’re listening Google, Apple, Mozilla and the rest.
\nBut there are some things you as a site owner can do while we wait for a more robust solution.
We created and played around with this codepen where you can test skip links that reference different types of elements like headings, <main>, <span>, <div>, and more. We found cases where including the attribute tabindex="-1" on the element you reference would solve the issue, but unfortunately only for iOS users. Here’s how:
\n<a href="#skip-here">Skip to main content</a>\n\n//Menu and other stuff users might want to skip\n...\n<main id="skip-here" tabindex="-1">\n...\nSo simply adding tabindex="-1" to the element you’re skip link points to is the best solution we can offer at the moment. It won’t make your skip links work for all your screen reader users, but at least you’ll have catered the needs of the majority of them.
See update 3 below for problems with this solution and other, better ways to solve this
\nA lot of clever people read our articles, and it turns out that there’s an even better solution. Paul J. Adam (@pauljadam) uses javascript to move focus to the first heading. Like this with jQuery:
\n\n$('#skip-link').click(function(e) {\ne.preventDefault();\n$(':header:first').attr('tabindex', '-1').focus();\n});\nIt works splendidly! Check it out on Paul’s website.
\nBen Buchanan made a regular “vanilla” javascript solution from Paul Adam’s solution above, since many people don’t use jQuery. And he was also kind enough to share it with us and the world, so here it is:
\nCodepen – Working skip links using vanilla JS
\nAnika Henke e-mailed us some great input:
\nI’m a developer working in the accessibility team at GDS (the people behind gov.uk).
\nI was made aware of your article about skip links and that it mentions gov.uk.
\nWe investigated the very same issue on gov.uk last year and I created a bug report for the iOS issue as it’s clearly a browser or screen reader bug.
\nYour suggested solution introduces worse barriers, though. See our Pull Request about removing tabindex from main to understand why. To quote:
\n“When clicking anywhere in the page focus will return back to the top. Consider a user interacting with an input field who clicks away from it to remove the focus style. Should they then hit tab they will be taken to the top of the page.”
\nThe JavaScript solutions are a bit better because they focus on a smaller element. But it is too specific. It is dependent on certain elements or IDs being present.
\nSince ages I’ve been using a better fix in my personal projects which fixes all in-pages links, not just skip links, and removes the tabindex the moment the focus moves away.
\nThanks for that great input Anika!
\nThe post Your skip links are broken appeared first on Axess Lab.
\n", "content_text": "Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.\n\nWhat are skip links?\nSkip links are a common accessibility feature on websites. They are simply shortcuts to important parts of the webpage that makes it easier and quicker for some users \u2013 especially users with disabilities \u2013 to find their way around.\nSkip links are usually hidden visually by default and appear when users navigate to them using the tab key on their keyboard. “Who would ever use a keyboard to navigate?” you may ask yourself. Well, lots of people actually! For instance many users with motor or sight impairments will rely on keyboard navigation. But more on the use cases under the next heading.\nIf you want to try out a skip link using your laptop, go to Starbuck’s website and press the tab key after you have entered the site.\nHere’s an attempt at illustrating what happens.\u00a0\nSo when you “tab into” the site the skip link appears, and you can activate it with the Enter key to skip to where it points. On Starbuck’s site you can (in theory) skip to either the main navigation, content or footer.\nSkip links work well on desktop. Here’s a short video where I’m using them on a few sites with the VoiceOver screen reader on Mac. It might be a bit difficult to follow along if you’re unused to hearing a screen reader in action, and to make things worse mine switches between Swedish and English. But the important thing to notice is how the focus indicator jumps into the content area after I press the skip links:\n\nSkip links are great when they work, and this type of functionality is recommended in the Web Content Accessibility Guidelines (WCAG):\n2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.\n\u2013 WCAG 2.1\nWho are skip links for?\nSkip links are mainly used by:\n\nUsers with motor impairments who navigate with a keyboard instead of a mouse.\nUsers with motor impairments who navigate with switches.\nUsers with severe visual impairments who use screen readers\u00a0on desktop or mobile devices.\nUsers with low vision who use\u00a0screen magnification software\u00a0in combination with keyboard navigation.\n\nInstead of having to spend time tabbing through the logotype, links in the header, menu, etcetera, on each page you visit, skip links provide a handy shortcut to jump straight to what you’re after.\nThey’re also quite popular among users. In the latest Web AIM screen reader user survey \u2013 which almost 1800 people responded to \u2013\u00a0over 30% said they always or often use skip links when they are present.\nWe’ve seen in user tests that skip links are even more used by novice screen reader users. Tech savvy users tend to use shortcuts on their keyboard or special gestures to skip between different parts of the page. But less “techy” users are not always aware of those features, and will instead often use the skip link to find their way to the main content.\nThe problem\nWe became aware of a major issue with skip links after seeing it in two user tests a few months apart, where two different screen reader users struggled with the same type of problem on two different websites.\nOne of our clients was kind enough to let us share a video clip from their user test in this article. So thanks, Council of the European Union, for that ❤️. The user in the test has also given us her consent to spread this video.\nSo take a look at this clip (sorry for the blurry start), then we’ll tear apart exactly what’s happening.\n\nSo in the clip we see a screen reader user trying to use the skip link with her iPhone. This is what happens:\n\nShe activates the skip link.\nThe page scrolls down visually \u2013 which she and other blind user will not be helped by.\nShe swipes right to go to the next object \u2013 you can think of it like pressing the tab key on a desktop.\nThe screen reader puts focus on the cookie message, not the main content.\nShe naturally gets quite confused and annoyed.\n\nWe started investigating the problem and found the same issue on every single skip link we tested. You can try it yourself if you know how to use the screen reader on your smartphone at these sites:\n\nwww.starbucks.com\nwww.slack.com\nwww.gov.uk\n\nOr just check out this video where we try to use skip links with VoiceOver on an iPhone on the sites above. You’ll see the sites scrolling, but as soon as we swipe the screen to go to the next item, we’re back at the top of the page.\n\nSkip links are almost always constructed in the same way. They are simply anchor links pointing to a part of the page like <main>. Something like this:\n\n<a href="#skip-here">Skip to main content</a>\n\n//Menu and other stuff users might want to skip\n\n<main id="skip-here">\n...\n\nFor some reason, these simple anchor links don’t work as intended on iOS. We tried in Safari, Firefox and Chrome \u2013 all have the same issue.\nTo be clear, this problem exist on mobile when the user navigates by swiping to go from one object to the next. There is another way of navigating (explore by touch \u2013 moving your finger over objects on the screen), and then it works fine on iOS.\u00a0\nAffects Android as well, but in a different way\nRegular skip links don’t work with VoiceOver on iOS as shown above. Sadly they don’t work with Android’s screen reader TalkBack either, but this time it’s not the anchor link that’s causing the problems.\nIn Talkback, skip links don’t even show up when the screen reader focuses on them. Here’s a video where you’ll\u00a0hear the skip link being announced, but it’s not showing on the screen like in iOS. We try to activate the link when it’s announced, but nothing happens.\n\nThis is caused by a bug in Android that stops the focus event from being triggered. It’s probably easiest to understand if you look at this video comparing what happens when tabbing on desktop, using VoiceOver on iOS and using TalkBack on Android. You’ll see that when tabbing on desktop or using an iOS screen reader, the focused links turn orange. On Android, you never see the orange focus style.\n\nFor some reason, Android doesn’t trigger the CSS focus event with TalkBack. This is the reason skip links never show up visually on Android, since they are programmed to show up when they receive focus. This is a bug reported to Google, so hopefully they’ll fix it soon.\nBut shouldn’t it still be possible to use the link, even though it’s visually hidden? Sadly, that’s not possible. If you click on a hidden link with TalkBack, the link will not be activated. So, we guess that Google will need to fix this focus issue before skip links will work at all on Android.\nInteresting enough, some Android phones have a version of TalkBack called VoiceAssistant. With VoiceAssistant, skip links work exactly as intended!\nWhat can you do?\nSolving this bug is mostly up to browser and screen reader vendors. So we hope you’re listening Google, Apple, Mozilla and the rest.\nBut there are some things you as a site owner can do while we wait for a more robust solution.\nWe created and played around with this codepen where you can test skip links that reference different types of elements like headings, <main>, <span>, <div>, and more. We found cases where including the attribute tabindex="-1" on the element you reference would solve the issue, but unfortunately only for iOS users. Here’s how:\n\n<a href="#skip-here">Skip to main content</a>\n\n//Menu and other stuff users might want to skip\n...\n<main id="skip-here" tabindex="-1">\n...\n\nSo simply adding tabindex="-1" to the element you’re skip link points to is the best solution we can offer at the moment. It won’t make your skip links work for all your screen reader users, but at least you’ll have catered the needs of the majority of them. \nSee update 3 below for problems with this solution and other, better ways to solve this\nUpdate 1 \u2013 a better solution!\nA lot of clever people read our articles, and it turns out that there’s an even better solution. Paul J. Adam (@pauljadam) uses javascript to move focus to the first heading. Like this with jQuery: \n\n$('#skip-link').click(function(e) {\ne.preventDefault();\n$(':header:first').attr('tabindex', '-1').focus();\n});\n\nIt works splendidly! Check it out on Paul’s website.\nUpdate 2 – Vanilla javascript solution\nBen Buchanan made a regular “vanilla” javascript solution from Paul Adam’s solution above, since many people don’t use jQuery. And he was also kind enough to share it with us and the world, so here it is:\nCodepen – Working skip links using vanilla JS\nUpdate 3 – A comment from gov.uk\nAnika Henke e-mailed us some great input: \nI’m a developer working in the accessibility team at GDS (the people behind gov.uk).\nI was made aware of your article about skip links and that it mentions gov.uk.\nWe investigated the very same issue on gov.uk last year and I created a bug report for the iOS issue as it’s clearly a browser or screen reader bug.\nYour suggested solution introduces worse barriers, though. See our Pull Request about removing tabindex from main to understand why. To quote:\n“When clicking anywhere in the page focus will return back to the top. Consider a user interacting with an input field who clicks away from it to remove the focus style. Should they then hit tab they will be taken to the top of the page.”\nThe JavaScript solutions are a bit better because they focus on a smaller element. But it is too specific. It is dependent on certain elements or IDs being present.\nSince ages I’ve been using a better fix in my personal projects which fixes all in-pages links, not just skip links, and removes the tabindex the moment the focus moves away.\nThanks for that great input Anika! \nThe post Your skip links are broken appeared first on Axess Lab.", "date_published": "2018-06-21T10:16:59+02:00", "date_modified": "2018-09-17T16:15:12+02:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/06/skipsquare.png" }, { "id": "https://axesslab.com/hand-tremors/", "url": "https://axesslab.com/hand-tremors/", "title": "Hand tremors and the giant-button-problem", "content_html": "In this article we\u2019ll examine an overlooked accessibility problem that mainly affects users with hand tremors. It\u2019s in almost every interface out there, but barely ever highlighted in accessibility guidelines or discussions. It\u2019s also super easy to fix!
\n![\"Phone](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/04/Kopia-av-Touchtargets-2-3.png\")
We\u2019re writing this together with Erik Zetterstr\u00f6m of ICT Enablers.\u00a0Erik has worked with accessibility products, services and standardization since graduating in 2003, with a Master of Engineering in Computer Science. A few years ago Erik was diagnosed with Parkinson\u2019s disease.
\nHave you ever clicked something by accident? Most of us have. Maybe as you tried to scroll on your smartphone while on a bumpy bus, train or car ride? Annoying, right!
\nFor a lot of people with hand tremors \u2013 caused by for instance Parkinson\u2019s disease or essential tremor \u2013 unintentional clicks happen all the time. Especially while scrolling on a touch screen.
\nIf you think about it, touch screen scrolling requires a lot of fine motor control. You need to place your finger on the correct part of the screen, flick it at the right speed and in the right direction, and most importantly: keep it on the screen at all times during this gesture.
\nMany web and app interfaces are designed in a way that causes big problems for users who have a hard time with this scroll gesture. Luckily, there are simple ways of making your interface more hand-tremor-accessible. Let\u2019s dive in!
\nA lot of sites and apps contain lists of clickable things, for instance products or news articles. These are usually placed back-to-back, with no space between the touch targets. Like this:
\n![\"Three](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/04/No-space.png\")
Here is a video showing a user with Parkinson’s disease trying to scroll through such an interface during a user test we carried out a while ago. He speaks Swedish, so turn on the captions if you’re not one of the 10 million people who understands our fine language!
\n\nIf you look closely, the user is trying to place his finger between the news stories. He’s hoping the space is unclickable, so that an accidental tap while trying to scroll will not activate a link. However, every part of the screen is linked. It\u2019s like the whole interface is one giant button \u2013 hey what a clever comparison, let\u2019s add that to the title of this article!
\nHere’s a quote from the video that explains the essence of it:
\n\nThey should add some space between the different objects so that I can put my finger down without activating something.
\n\u2013 User with Parkinson’s disease
It would help enormously if there was just a little bit of space between each touch target in the list. Like this:
\n![\"Space](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/04/Touchtargets-1.png\")
Now users can place their finger in that unclickable space and accidentally tap without flying off to another page. A little space between the touch targets also makes the interface feel less crowded. Win-win!
\nThis is how it looks on our site, scrolling through our\u00a0articles. Not too shabby, right?
\n![\"60](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/04/Axesslab-articles.png\")
Another way of solving this scroll-conundrum would be for browsers to make it possible to have a scrollbar visible at the side of the screen on mobile.
\n![\"Scrollbar](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/04/Touchtargets-2.png\")
The scrollbar could be activated through the browser\u2019s settings menu \u2013 or in some other smart way \u2013 so it doesn\u2019t have to show all the time for all users.
\nWe don\u2019t know. The Web Content Accessibility Guidelines (WCAG) do not include this problem. We can only speculate as to why.\u00a0It might be because:
\nWhatever the reason, the lack of focus on motor impairments in accessibility guidelines is a big problem that needs to be addressed. Hopefully the folks working with the 3.0 version of WCAG are listening!
\nAlso, this illustrates the point we make time after time: you need to user test with people with disabilities. No checklist or guideline will ever be able to replace meeting actual users and watching them use your product (tell us if you need help with this).
\nThanks for showing an interest in accessibility by reading this article. Hopefully you’ll help out in making the web a little more inclusive. Make sure there’s some unclickable space on each screen, it’s as simple as that!
\nIf you liked this article, here are some others you might enjoy:
\nThe post Hand tremors and the giant-button-problem appeared first on Axess Lab.
\n", "content_text": "In this article we\u2019ll examine an overlooked accessibility problem that mainly affects users with hand tremors. It\u2019s in almost every interface out there, but barely ever highlighted in accessibility guidelines or discussions. It\u2019s also super easy to fix!\n\nWe\u2019re writing this together with Erik Zetterstr\u00f6m of ICT Enablers.\u00a0Erik has worked with accessibility products, services and standardization since graduating in 2003, with a Master of Engineering in Computer Science. A few years ago Erik was diagnosed with Parkinson\u2019s disease.\nHave you ever clicked something by accident? Most of us have. Maybe as you tried to scroll on your smartphone while on a bumpy bus, train or car ride? Annoying, right!\nFor a lot of people with hand tremors \u2013 caused by for instance Parkinson\u2019s disease or essential tremor \u2013 unintentional clicks happen all the time. Especially while scrolling on a touch screen. \nIf you think about it, touch screen scrolling requires a lot of fine motor control. You need to place your finger on the correct part of the screen, flick it at the right speed and in the right direction, and most importantly: keep it on the screen at all times during this gesture. \nOops! I clicked it again\nMany web and app interfaces are designed in a way that causes big problems for users who have a hard time with this scroll gesture. Luckily, there are simple ways of making your interface more hand-tremor-accessible. Let\u2019s dive in! \nA lot of sites and apps contain lists of clickable things, for instance products or news articles. These are usually placed back-to-back, with no space between the touch targets. Like this:\n\nHere is a video showing a user with Parkinson’s disease trying to scroll through such an interface during a user test we carried out a while ago. He speaks Swedish, so turn on the captions if you’re not one of the 10 million people who understands our fine language!\n\nIf you look closely, the user is trying to place his finger between the news stories. He’s hoping the space is unclickable, so that an accidental tap while trying to scroll will not activate a link. However, every part of the screen is linked. It\u2019s like the whole interface is one giant button \u2013 hey what a clever comparison, let\u2019s add that to the title of this article!\nHere’s a quote from the video that explains the essence of it:\nThey should add some space between the different objects so that I can put my finger down without activating something.\n\u2013 User with Parkinson’s disease\nThe simple solution\nIt would help enormously if there was just a little bit of space between each touch target in the list. Like this:\n\nNow users can place their finger in that unclickable space and accidentally tap without flying off to another page. A little space between the touch targets also makes the interface feel less crowded. Win-win! \nThis is how it looks on our site, scrolling through our\u00a0articles. Not too shabby, right?\n\nHey browsers! You can help out too\nAnother way of solving this scroll-conundrum would be for browsers to make it possible to have a scrollbar visible at the side of the screen on mobile. \n\nThe scrollbar could be activated through the browser\u2019s settings menu \u2013 or in some other smart way \u2013 so it doesn\u2019t have to show all the time for all users. \nBut wait! Why isn\u2019t this in the accessibility guidelines?\nWe don\u2019t know. The Web Content Accessibility Guidelines (WCAG) do not include this problem. We can only speculate as to why.\u00a0It might be because:\n\nTouch screen scrolling has only been around since the smartphone revolution, like ten years. Seems like long enough, but the WCAG is a standard and standards move at glacier speeds. The 2.0 version WCAG was released in 2008 and it’s not until the summer of 2018 \u2013 ten years later \u2013 that\u00a0WCAG 2.1\u00a0arrives.\nThere’s a lack of knowledge about accessibility issues that affect users with motor impairment. \nThe WCAG is primarily focused on vision impairments and assistive technologies. Motor impairments are sadly not covered as well, which they\u2019re trying to change but not succeeding with. For instance, for a long time it was looking like they would add a minimum touch target size criteria to the new 2.1 version of WCAG, at level AA. But sadly, last minute this criteria was bumped up to level AAA, basically meaning nobody will care about it since all legislations and requirements are concerned with level A and level AA. \n\nWhatever the reason, the lack of focus on motor impairments in accessibility guidelines is a big problem that needs to be addressed. Hopefully the folks working with the 3.0 version of WCAG are listening!\nAlso, this illustrates the point we make time after time: you need to user test with people with disabilities. No checklist or guideline will ever be able to replace meeting actual users and watching them use your product (tell us if you need help with this).\nLet’s make the web more hand tremor friendly\nThanks for showing an interest in accessibility by reading this article. Hopefully you’ll help out in making the web a little more inclusive. Make sure there’s some unclickable space on each screen, it’s as simple as that!\nIf you liked this article, here are some others you might enjoy:\n\nAccessibility according to actual people with disabilities\nPractical examples of accessibility improvements\nAssistive technologies \u2013 The switch\n\nThe post Hand tremors and the giant-button-problem appeared first on Axess Lab.", "date_published": "2018-04-09T09:37:36+02:00", "date_modified": "2018-04-09T09:50:48+02:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/04/featured.png" }, { "id": "https://axesslab.com/text-splitting/", "url": "https://axesslab.com/text-splitting/", "title": "Text Splitting Causes Screen Reader Problems", "content_html": "I am a screen reader user, and I am annoyed! I repeatedly encounter the same problem on websites. It’s about text splitting up. Let me share my agony with you!
\n![\"Button](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/03/banner.png\")
First a short background if you’re not familiar with screen readers. When navigating a web site on a touch screen, my screen reader \u2013 VoiceOver \u2013 will read what’s under my finger. It enables me and other people with visual impairments to use technology.
\nWhat I should hear when touching a link with my finger is:
\nFor instance: “Contact information, link”.
\nHowever, sometimes I just get to hear what type of element it is, not it’s name. Just “Link”. Not very helpful.
\nThe 16 second video below is from a Swedish site, but I think you’ll get the point even if you don’t know Swedish.
\n\nNotice how it just reads “Link” if my finger is on the right side of the elements \u2013 a bad user experience. If I touch the left side of the links, I get to hear the names together with the type of element \u2013 a good user experience.
\nWhat’s going on here? Well, let’s take the last link in the example above. It’s made up of two parts: The name “Arkiv” and the link icon.
\n<a href="...">\n Arkiv \n <span class="link-icon">\n </span>\n</a>\nIn the code, the icon is placed in its own span-element. A perfectly fine way to code your links. It should be read as one object, as the link-element is wrapping both the link name and the icon-span.
\nBut VoiceOver interprets it as two different objects if I touch the right span, rendering me confused.
\nYes, I wish. But I reported this error in 2012 and it’s still not fixed, so my hopes aren’t great. While we wait for Apple, there’s an easy workaround for developers to fix this on your sites.
\nWe had a similar problem on our site with headings, but the solution I used will work for links as well. Let’s look at it.
\nHere I’ve got an h1-element that looks like this in the code:
\n<h1>Digital accessibility, <br>\nfor everyone.</h1>As you can see in the video below, the br-tag causes the screen reader to interpret the title as two separate objects, just like the span did in the previous example. I want it to read the whole heading to me at once.
\n\nSo to force a screen reader to interpret the heading as one object, I wrapped the text inside the heading in a span and added role=”text”.
\n<h1>\n <span role="text">Digital accessibility, <br>\n for everyone. \n </span>\n</h1>\nAnd voil\u00e1, here is the result:
\n\nBeware! Don’t put role=”text” in the heading-element. This would erase the h1-semantics, so it would not appear as a heading in a screen reader. Every element inside the role=”text” will lose it’s semantics. So you need to add a span within the element and put role=”text” in that span.
\nApple, if you’re listening, please fix this. But until then, developers, please do the visual impaired community a favor and check your elements with a screen reader and fix them if necessary.
\nThis post went a bit viral! Which is great, but I’ve gotten a few questions that I want to clarify.
\nYes, we can, in some cases! In my first example, the link-icon is unnecessary to understand the purpose of the link, so you can just use aria-hidden=”true”. But we’d like the recommended technique to work in as many scenarios as possible.
\nSo imagine the following case. You have a link or heading with three words, where the middle one is stylized. For instance:
\n<a href="...">Buy <strong>t-shirts</strong> now</a>\nHere, VoiceOver would announce them as separate links: “Buy link”, “t-shirts link”, “now link”.
\nNow we can’t use aria-hidden since that would hide a word for the screen reader user. It would just say “Buy now link”, skipping the t-shirt part.
\nHowever, using the role=”text” technique will work great in this scenario as well.
\nTo navigate with a screen reader you can either touch parts of the screen and have the objects you’re touching read to you \u2013 explore by touch \u2013 or swipe your way across the interface from object to object. I use explore by touch in my videos.
\nOne person asked if this problem only occurs if you explore by touch.
\nHowever, sadly it happens both on explore by touch and when swiping.
\nApple have actually answered me. They think this is a feature. It makes it possible to recognize that different words are styled in different ways.
\nI think it’s a nice thought. But in reality, it’s not practical. For us screen reader users, it’s more important to get the whole sentence read than to recognize that something has a different styling.
\nOne idea would be to make the styling differences clear in some other way, like changing the pitch of the voice.
\nThe post Text Splitting Causes Screen Reader Problems appeared first on Axess Lab.
\n", "content_text": "I am a screen reader user, and I am annoyed! I repeatedly encounter the same problem on websites. It’s about text splitting up. Let me share my agony with you!\n\nThe problem\nFirst a short background if you’re not familiar with screen readers. When navigating a web site on a touch screen, my screen reader \u2013 VoiceOver \u2013 will read what’s under my finger. It enables me and other people with visual impairments to use technology.\nWhat I should hear when touching a link with my finger is:\n\nThe name of the link.\nWhat type of element it is: “link”.\n\nFor instance: “Contact information, link”.\nHowever, sometimes I just get to hear what type of element it is, not it’s name. Just “Link”. Not very helpful.\nThe 16 second video below is from a Swedish site, but I think you’ll get the point even if you don’t know Swedish.\n\nNotice how it just reads “Link” if my finger is on the right side of the elements \u2013 a bad user experience. If I touch the left side of the links, I get to hear the names together with the type of element \u2013 a good user experience.\nWhat’s going on here? Well, let’s take the last link in the example above. It’s made up of two parts: The name “Arkiv” and the link icon.\n<a href="...">\n Arkiv \n <span class="link-icon">\n </span>\n</a>\n\nIn the code, the icon is placed in its own span-element. A perfectly fine way to code your links. It should be read as one object, as the link-element is wrapping both the link name and the icon-span.\nBut VoiceOver interprets it as two different objects if I touch the right span, rendering me confused.\nOK, so Apple should fix this?\nYes, I wish. But I reported this error in 2012 and it’s still not fixed, so my hopes aren’t great. While we wait for Apple, there’s an easy workaround for developers to fix this on your sites.\nThe solution: role=”text”\nWe had a similar problem on our site with headings, but the solution I used will work for links as well. Let’s look at it.\nHere I’ve got an h1-element that looks like this in the code:\n<h1>Digital accessibility, <br>\nfor everyone.</h1>\nAs you can see in the video below, the br-tag causes the screen reader to interpret the title as two separate objects, just like the span did in the previous example. I want it to read the whole heading to me at once.\n\nSo to force a screen reader to interpret the heading as one object, I wrapped the text inside the heading in a span and added role=”text”.\n<h1>\n <span role="text">Digital accessibility, <br>\n for everyone. \n </span>\n</h1>\n\nAnd voil\u00e1, here is the result:\n\nBeware! Don’t put role=”text” in the heading-element. This would erase the h1-semantics, so it would not appear as a heading in a screen reader. Every element inside the role=”text” will lose it’s semantics. So you need to add a span within the element and put role=”text” in that span.\nApple, if you’re listening, please fix this. But until then, developers, please do the visual impaired community a favor and check your elements with a screen reader and fix them if necessary.\nUpdate \u2013 questions and answers\nThis post went a bit viral! Which is great, but I’ve gotten a few questions that I want to clarify.\nCan’t we just use aria-hidden on the icon?\nYes, we can, in some cases! In my first example, the link-icon is unnecessary to understand the purpose of the link, so you can just use aria-hidden=”true”. But we’d like the recommended technique to work in as many scenarios as possible.\nSo imagine the following case. You have a link or heading with three words, where the middle one is stylized. For instance:\n<a href="...">Buy <strong>t-shirts</strong> now</a>\n\nHere, VoiceOver would announce them as separate links: “Buy link”, “t-shirts link”, “now link”.\nNow we can’t use aria-hidden since that would hide a word for the screen reader user. It would just say “Buy now link”, skipping the t-shirt part.\nHowever, using the role=”text” technique will work great in this scenario as well.\nIs this just a problem with explore by touch?\nTo navigate with a screen reader you can either touch parts of the screen and have the objects you’re touching read to you \u2013 explore by touch \u2013 or swipe your way across the interface from object to object. I use explore by touch in my videos.\nOne person asked if this problem only occurs if you explore by touch.\nHowever, sadly it happens both on explore by touch and when swiping.\nWhy don’t you keep writing to Apple?\nApple have actually answered me. They think this is a feature. It makes it possible to recognize that different words are styled in different ways.\nI think it’s a nice thought. But in reality, it’s not practical. For us screen reader users, it’s more important to get the whole sentence read than to recognize that something has a different styling.\nOne idea would be to make the styling differences clear in some other way, like changing the pitch of the voice.\nThe post Text Splitting Causes Screen Reader Problems appeared first on Axess Lab.", "date_published": "2018-03-04T16:41:18+01:00", "date_modified": "2019-07-04T14:50:46+02:00", "author": { "name": "DanielGoransson", "url": "https://axesslab.com/author/danielgoransson/", "avatar": "https://secure.gravatar.com/avatar/d276c4825491378b09d00085946cc412?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/03/featured.png" }, { "id": "https://axesslab.com/switches/", "url": "https://axesslab.com/switches/", "title": "Assistive Technologies \u2013 The Switch", "content_html": "A switch is an assistive technology primarily used by people with motor impairments to access and control computers, smartphones, electric wheelchairs, smart home appliances and more. Let’s look at some switches in action and go through how you design switch friendly interfaces.
\n![\"Two](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/02/banner-1.png\")
At it’s core, a switch is simply a way for a user to activate a control. This can be done in multiple ways, and different users prefer different switches.
\nThe classic example of a switch looks like a big round button:
\n![\"Red](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/02/Switch.png\")
This type of switch can be placed in the users’ hands, by their head, elbows, feet or wherever they feel most comfortable with it.
\nOn the screen, there’s usually a focus indicator moving automatically across the different objects, and the user clicks by activating the switch. Some users have multiple switches and can use one to move the cursor forward and another for clicking.
\nVideo editor Christopher Hills has multiple switches placed on his head rest. Here’s a video where he shows how he uses his switches together with Apple Switch Control.
\n\n\n
World famous theoretical physicist Stephen Hawking used a handheld switch, or “clicker”, earlier in his life. But as his control of his hand muscles decreased due to his Amyotrophic lateral sclerosis (ALS), he now uses a “cheek-switch”. If you look closely, you can see it in the video below. It’s a black sensor just below his glasses. So he moves his cheek to activate the switch.
\n\nOn Stephen’s screen, a focus cursor will move across his computer’s interface automatically, and he moves the cheeck-sensor to activate the object in focus.
\nMost operating systems integrate with switches right out of the box, with no need to download special software or apps. For example, Apple devices have a setting called Switch Control (Settings, General, Accessiblity, Switch Control) and Android devices have Switch Access (Settings, Accessibility, Switch Access). You can use a Bluetooth keyboard with an iOS or Android device to try it out yourself. Or buy a switch, the cheapest ones cost around \u20ac 100.
\nAnother type of switch is a “Sip-and-puff”. In this case, the users activate the switch by either inhaling \u2013 sip \u2013 or exhaling \u2013 puff.
\nUsually these types of switches come with a lip-controlled joystick that moves the mouse cursor on the screen.
\nHere’s Mark Willits demonstrating how he uses a sip-and-puff switch Jouse in combination with voice recognition software and an on screen keyboard.
\n\nHere’s a similar product, Integramouse.
\n![\"Young](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/02/integramouse_plus_05.jpg\")
Not only people with motor impairments use switches. Some people with intellectual or learning impairments can find keyboards or game controllers too complex. They use switches to play simple games, communicate using digital boards or quickly access their favorite sites.
\nHere are some things for developers and designers to think about when designing digital interfaces for switch users.
\nThere are \u2013 of course \u2013 more things to consider when creating switch accessible interfaces, but I think that is enough detail for this introductory article. Get in touch if you want a more complete checklist on switch accessibility: hello@axesslab.com!
\nHope you learned something new! Thanks for reading and leveling up your accessibility know-how!
\nThe post Assistive Technologies \u2013 The Switch appeared first on Axess Lab.
\n", "content_text": "A switch is an assistive technology primarily used by people with motor impairments to access and control computers, smartphones, electric wheelchairs, smart home appliances and more. Let’s look at some switches in action and go through how you design switch friendly interfaces.\n\nSo what is a switch?\nAt it’s core, a switch is simply a way for a user to activate a control. This can be done in multiple ways, and different users prefer different switches.\nThe classic example of a switch looks like a big round button:\n\nThis type of switch can be placed in the users’ hands, by their head, elbows, feet or wherever they feel most comfortable with it.\nOn the screen, there’s usually a focus indicator moving automatically across the different objects, and the user clicks by activating the switch. Some users have multiple switches and can use one to move the cursor forward and another for clicking.\nVideo editor Christopher Hills has multiple switches placed on his head rest. Here’s a video where he shows how he uses his switches together with Apple Switch Control.\n\n \nWorld famous theoretical physicist Stephen Hawking used a handheld switch, or “clicker”, earlier in his life. But as his control of his hand muscles decreased due to his Amyotrophic lateral sclerosis (ALS), he now uses a “cheek-switch”. If you look closely, you can see it in the video below. It’s a black sensor just below his glasses. So he moves his cheek to activate the switch.\n\nOn Stephen’s screen, a focus cursor will move across his computer’s interface automatically, and he moves the cheeck-sensor to activate the object in focus.\nMost operating systems integrate with switches right out of the box, with no need to download special software or apps. For example, Apple devices have a setting called Switch Control (Settings, General, Accessiblity, Switch Control) and Android devices have Switch Access (Settings, Accessibility, Switch Access). You can use a Bluetooth keyboard with an iOS or Android device to try it out yourself. Or buy a switch, the cheapest ones cost around \u20ac 100.\nAnother type of switch is a “Sip-and-puff”. In this case, the users activate the switch by either inhaling \u2013 sip \u2013 or exhaling \u2013 puff.\nUsually these types of switches come with a lip-controlled joystick that moves the mouse cursor on the screen.\nHere’s Mark Willits demonstrating how he uses a sip-and-puff switch Jouse in combination with voice recognition software and an on screen keyboard.\n\nHere’s a similar product, Integramouse.\n\nNot only people with motor impairments use switches. Some people with intellectual or learning impairments can find keyboards or game controllers too complex. They use switches to play simple games, communicate using digital boards or quickly access their favorite sites.\nHow to design switch-friendly interfaces\nHere are some things for developers and designers to think about when designing digital interfaces for switch users.\n\nMake your interface keyboard accessible.\nThat is, make sure you can control it only using the tab, space and arrow keys of your keyboard. If that doesn’t work, then switch users most likely will run into trouble.\nPlace key information, buttons and links “above the fold” \u2013 visible without scrolling.\nScrolling usually requires a lot more time and effort for switch users. With iOS Switch Control, a user needs to activate the switch seven times to scroll: 2 clicks to see the interaction menu, 3 clicks to navigate and activate the scroll and 2 clicks to remove the menu.\nDon’t require hover, click-and-drag or other advanced gestures.\nAlthough most switch interfaces have functionality for these gestures, they take a lot of effort to carry out and many less tech-savvy users will not know about them.\nUse a large text size as default.\nMany switch control users physically can’t lean close to a screen to read tiny, italics text.\nAvoid time limits.\nIt will take most switch control users longer to complete a form or navigate your interface. So avoid using time limits. But if you do, make sure to give the user a way of increasing the time and give them a warning long before time’s up.\n\nThere are \u2013 of course \u2013 more things to consider when creating switch accessible interfaces, but I think that is enough detail for this introductory article. Get in touch if you want a more complete checklist on switch accessibility: hello@axesslab.com!\nHope you learned something new! Thanks for reading and leveling up your accessibility know-how!\nThe post Assistive Technologies \u2013 The Switch appeared first on Axess Lab.", "date_published": "2018-02-19T15:26:53+01:00", "date_modified": "2018-02-19T20:30:37+01:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/02/Featured.png" }, { "id": "https://axesslab.com/title-texts-suck/", "url": "https://axesslab.com/title-texts-suck/", "title": "Title Texts Suck", "content_html": "Many people I meet think title texts, also known as tooltips, improve both the accessibility and usability of their sites. They don’t. In fact, they can even cause problems. Let’s see why!
\n![\"Hover](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/02/banner-e1518102834389.png\")
Here below is a link with a title text. Hold your mouse pointer over it for a while and a small text will pop up. That’s the title text. It’s added with the title-attribute in the link.
\n\nThis is how it looks:
\n![\"Mouse](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/02/title-example.png\")
“Wait a minute” a lot of you will be thinking. “I’m on my phone, I don’t have a mouse pointer.” Great observation! It brings us perfectly onto our next topic…
\nTitle texts only show up on hover, and you can’t hover on 99.9% of all touch screens. I think most people would agree that a design pattern that doesn’t work on touchscreens kind of sucks.
\nFor users with screen magnification, title texts will often be somewhat of a bully. The title text can be cut off the screen because the user is zoomed in so far. When the user moves the mouse pointer to be able to see it, the title text will often disappear. More on this in our article How to make your site accessible to screen magnifiers.
![\"Screenshot](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/02/screen-magnifier.png\")
Another problem for users with screen magnification is that the title text can cover essential parts of the content. In the example below the title text for the image covers the link below it.
![\"Title](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/02/title-text-magn.png\")
You might be thinking: “Well, just move the mouse cursor.” Sadly it’s often not possible for users who are zoomed in very far and need to have the cursor where they are reading.
\nAs icing on top of the cake for this group of users, title texts will not be enlarged when you use browser zoom (control +). So yeah, title texts really suck for people with visual impairments.
\nApart from not working on touch screens, title texts don’t show up for users who navigate with the keyboard or with the many assistive technologies for users with motor impairments. There are ways to make the title text show on keyboard focus, but it’s not there by default and almost no developers will add that feature.
\nThere is no way to tell if a link, icon, form field, button or other element has a title text before hovering over it. Most users will not bother to waste energy hovering over something to possibly get help. In the words of usability guru Jakob Nielsen: the interaction cost is too high.
\nNot only does the user have to guess if there’s a title text, they also have to wait a second before it possibly shows. Users are usually in a hurry when navigating the web, so most won’t stop and dwell.
\nMany users with visual impairments use screen readers to navigate the web. Some screen readers will read title texts. Some will not the read title texts. Some will pause before reading them. Some have a setting that the user can enable to read them, but most will not know of that setting or bother activating it.
\nThe point is, title texts are handled differently and you can’t rely on how it’s conveyed to the user.
\nDavid Ball of @silktide wrote this nicely researched piece on the same subject a few years ago:
\nI thought title text improved accessibility. I was wrong.
\nHe asked html-expert Jeffrey Zeldman on his thoughts on title-texts.
\n\n\n\n@silktide No! Do not use.
\n\u2014 zeldman (@zeldman) December 12, 2012
Web accessibility guru Bruce Lawson isn’t a fan of the title-text either:
\n\n\n@silktide kill it with fire. Or, as Bim, a blind screenreader user with RNIB would say: http://t.co/y6tN6UZU
\n\u2014 Bruce Lawson (@brucel) December 12, 2012
Also, here’s another nice article on title texts: Don’t rely on the title attribute for accessibility.
\nWell, just make sure your link and button names clearly describe where they take your user and you’ll be fine. Also, write text labels for your icons, then you’ll not need to worry about title texts.
\nDon’t confuse title texts with alt-texts. Alt-texts are very important and don’t suck at all:
\n\nSome accessibility experts say there’s one exception where they recommend using the title text: iframes. First off: don’t use iframes unless you really have to. They can really confuse screen reader users.
\nBut if you use them anyway, just add an aria-label that describes the iframe’s content instead of the title attribute and this conundrum is solved.
\nThis was our third article on the topic of things that suck. You should check out our other two master pieces:
\n\n\nHope you enjoyed!
\nThe post Title Texts Suck appeared first on Axess Lab.
\n", "content_text": "Many people I meet think title texts, also known as tooltips, improve both the accessibility and usability of their sites. They don’t. In fact, they can even cause problems. Let’s see why!\n\nWhat’s a title text?\nHere below is a link with a title text. Hold your mouse pointer over it for a while and a small text will pop up. That’s the title text. It’s added with the title-attribute in the link.\nDemo link with title\nThis is how it looks:\n\n“Wait a minute” a lot of you will be thinking. “I’m on my phone, I don’t have a mouse pointer.” Great observation! It brings us perfectly onto our next topic…\nThe problem with title texts\n1. Title texts don’t work on touch screens\nTitle texts only show up on hover, and you can’t hover on 99.9% of all touch screens. I think most people would agree that a design pattern that doesn’t work on touchscreens kind of sucks.\n2.\u00a0Title texts cause problems for screen magnifiers\nFor users with screen magnification, title texts will often be somewhat of a bully. The title text can be cut off the screen because the user is zoomed in so far. When the user moves the mouse pointer to be able to see it, the title text will often disappear. More on this in our article How to make your site accessible to screen magnifiers.\nAnother problem for users with screen magnification is that the title text can cover essential parts of the content. In the example below the title text for the image covers the link below it. \nYou might be thinking: “Well, just move the mouse cursor.” Sadly it’s often not possible for users who are zoomed in very far and need to have the cursor where they are reading.\nAs icing on top of the cake for this group of users, title texts will not be enlarged when you use browser zoom (control +). So yeah, title texts really suck for people with visual impairments.\n3. Title texts don’t work with keyboard navigation\nApart from not working on touch screens, title texts don’t show up for users who navigate with the keyboard or with the many assistive technologies for users with motor impairments. There are ways to make the title text show on keyboard focus, but it’s not there by default and almost no developers will add that feature.\n4. Title texts require users to guess\nThere is no way to tell if a link, icon, form field, button or other element has a title text before hovering over it. Most users will not bother to waste energy hovering over something to possibly get help. In the words of usability guru Jakob Nielsen: the interaction cost is too high.\n5. Title texts require users to wait\nNot only does the user have to guess if there’s a title text, they also have to wait a second before it possibly shows. Users are usually in a hurry when navigating the web, so most won’t stop and dwell.\n6. Screen readers read title texts inconsistently\nMany users with visual impairments use screen readers to navigate the web. Some screen readers will read title texts. Some will not the read title texts. Some will pause before reading them. Some have a setting that the user can enable to read them, but most will not know of that setting or bother activating it.\nThe point is, title texts are handled differently and you can’t rely on how it’s conveyed to the user.\nDon’t trust me?\nDavid Ball of @silktide wrote this nicely researched piece on the same subject a few years ago:\nI thought title text improved accessibility. I was wrong.\nHe asked html-expert Jeffrey Zeldman on his thoughts on title-texts.\n\n@silktide No! Do not use.\n\u2014 zeldman (@zeldman) December 12, 2012\n\nWeb accessibility guru Bruce Lawson isn’t a fan of the title-text either:\n\n@silktide kill it with fire. Or, as Bim, a blind screenreader user with RNIB would say: http://t.co/y6tN6UZU\n\u2014 Bruce Lawson (@brucel) December 12, 2012\nAlso, here’s another nice article on title texts: Don’t rely on the title attribute for accessibility.\nWhat should I use instead of title texts?\nWell, just make sure your link and button names clearly describe where they take your user and you’ll be fine. Also, write text labels for your icons, then you’ll not need to worry about title texts.\nDon’t confuse title texts with alt-texts. Alt-texts are very important and don’t suck at all:\nAlt-texts: the Ultimate Guide\nWhat about iframes?\nSome accessibility experts say there’s one exception where they recommend using the title text: iframes. First off: don’t use iframes unless you really have to. They can really confuse screen reader users.\nBut if you use them anyway, just add an aria-label that describes the iframe’s content instead of the title attribute and this conundrum is solved.\nOther things that suck\nThis was our third article on the topic of things that suck. You should check out our other two master pieces:\nDisabled Buttons Suck\nCaptchas Suck\nHope you enjoyed!\nThe post Title Texts Suck appeared first on Axess Lab.", "date_published": "2018-02-08T16:15:51+01:00", "date_modified": "2018-02-13T17:37:51+01:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/02/featured.png" }, { "id": "https://axesslab.com/paying-open-source/", "url": "https://axesslab.com/paying-open-source/", "title": "Paying Employees to Work on Open Source Projects", "content_html": "Open source is awesome and even though we’re a startup we’ve found a way to pay our employees to contribute to the community. Here’s how and why we do it.
\n![\"Woman](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/01/computer-1185626_1920.jpg\")
Photo: Samedaypapers
\nWe, like most other companies that build software, base a lot of what we do on components and frameworks that were built in open source projects.
\nEven though we are a small (but growing) startup \u2013 five employees at the moment \u2013 we wanted to find a way to actively contribute to the open source community. We were inspired by how Futurice sponsors free time open source activities, and set up our own version of it.
\nAs an employee at Axess Lab, you get paid 15 \u20ac an hour for up to 10 hours a month for open source work if:
\nThe employees have a time code in our time reporting system where they report the open source work and add a copy to a relevant pull request or commit.
\nThat’s it. We don’t make it more complicated than that.
\nWhy would a startup like us do this. Well, we see many benefits:
\nHopefully this will inspire some other companies to set up something similar.
\nIf you want to know more, get in touch with us by mailing hello@axesslab.com or tweeting @axesslab.
\nYou’re extra welcome to message us if you live in Sweden and are interested in working with us to make the digital world more accessible!
\nThe post Paying Employees to Work on Open Source Projects appeared first on Axess Lab.
\n", "content_text": "Open source is awesome and even though we’re a startup we’ve found a way to pay our employees to contribute to the community. Here’s how and why we do it.\n\nPhoto: Samedaypapers\nWe, like most other companies that build software, base a lot of what we do on components and frameworks that were built in open source projects.\nEven though we are a small (but growing) startup \u2013 five employees at the moment \u2013 we wanted to find a way to actively contribute to the open source community. We were inspired by how Futurice sponsors free time open source activities, and set up our own version of it.\nThe deal\nAs an employee at Axess Lab, you get paid 15 \u20ac an hour for up to 10 hours a month for open source work if:\n\nIt’s done outside of working hours\nThe project or task is related to accessibility, inclusive design or something similar\n\nThe employees have a time code in our time reporting system where they report the open source work and add a copy to a relevant pull request or commit.\nThat’s it. We don’t make it more complicated than that.\nWhat’s in it for us?\nWhy would a startup like us do this. Well, we see many benefits:\n\nIt makes our employees even more skilled at accessibility.\nIt’s a good way to give something back to the open source community\nIt increases our chances of recruiting great people to our company\nIt aligns with our company’s vision of creating a more inclusive digital world\nIt makes our employees happy\n\nWant to know more?\nHopefully this will inspire some other companies to set up something similar.\nIf you want to know more, get in touch with us by mailing hello@axesslab.com or tweeting @axesslab.\nYou’re extra welcome to message us if you live in Sweden and are interested in working with us to make the digital world more accessible!\nThe post Paying Employees to Work on Open Source Projects appeared first on Axess Lab.", "date_published": "2018-01-18T10:41:11+01:00", "date_modified": "2019-09-10T08:49:39+02:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2018/01/featured.jpg" }, { "id": "https://axesslab.com/top-articles-2017/", "url": "https://axesslab.com/top-articles-2017/", "title": "Our Top Articles 2017", "content_html": "It’s been a great 2017 at Axess Lab! We celebrate by listing our most popular articles all year.
\n![\"Podium](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/cup-1613315_1920.jpg\")
Here are the top three. Congratulations!
\nAccessibility According to Actual People with Disabilities
\n🥇 43 000 page views
\n“If you have a disability, what’s the hardest thing about browsing the web?” We sum up the answers to a viral Twitter thread.
How Icons are Ruining Interfaces
\n🥈 18 300 pageviews
\nMore and more designers are using icons in the wrong way. And it\u2019s hurting both the usability and accessibility of interfaces.
Alt-texts: The Ultimate Guide
\n🥉 15 200 pageviews
\nPractical tips on how to craft the perfect alt-texts. We also go through when to \u2013 and not to \u2013 use them.
Here are some articles that fought hard but just missed the podium. Ouch!
\nDisabled Buttons Suck
\nShowing buttons as disabled might seem like a good idea. It is not. Here\u2019s why disabled buttons suck and what to do instead.
Fonts Don’t Matter
\nIf you\u2019re an art director, you might want to sit down for this. Here’s why fonts are overrated and what actually matters for readability.
Top 7 Free Color Contrast Checkers
\nSeven great free tools that help you measure color contrasts and create beautiful, accessible color schemes
The post Our Top Articles 2017 appeared first on Axess Lab.
\n", "content_text": "It’s been a great 2017 at Axess Lab! We celebrate by listing our most popular articles all year.\n\nThe podium\nHere are the top three. Congratulations!\nAccessibility According to Actual People with Disabilities\n🥇 43 000 page views\n“If you have a disability, what’s the hardest thing about browsing the web?” We sum up the answers to a viral Twitter thread.\nHow Icons are Ruining Interfaces\n🥈 18 300 pageviews\nMore and more designers are using icons in the wrong way. And it\u2019s hurting both the usability and accessibility of interfaces.\nAlt-texts: The Ultimate Guide\n🥉 15 200 pageviews\nPractical tips on how to craft the perfect alt-texts. We also go through when to \u2013 and not to \u2013 use them.\nHappy losers\nHere are some articles that fought hard but just missed the podium. Ouch!\nDisabled Buttons Suck\nShowing buttons as disabled might seem like a good idea. It is not. Here\u2019s why disabled buttons suck and what to do instead.\nFonts Don’t Matter\nIf you\u2019re an art director, you might want to sit down for this. Here’s why fonts are overrated and what actually matters for readability.\nTop 7 Free Color Contrast Checkers\nSeven great free tools that help you measure color contrasts and create beautiful, accessible color schemes\nThe post Our Top Articles 2017 appeared first on Axess Lab.", "date_published": "2017-12-29T13:01:13+01:00", "date_modified": "2017-12-29T13:01:13+01:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/featured-1.jpg" }, { "id": "https://axesslab.com/practical-accessibility-improvements/", "url": "https://axesslab.com/practical-accessibility-improvements/", "title": "Practical Examples of Accessibility Improvements", "content_html": "“It would be great to see actual examples of accessibility in action. Like before and after accessibility improvements.” I got this great comment from a woman in the audience at a meetup. So let’s make that idea a reality!
\n![\"Teddy](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/teddy-562960_1920.jpg\")
Accessibility is a lot about offering people alternatives.
\nHere’s an example from “real life”. When I was user testing with people with disabilities, this slider proved to be an obstacle for people with motor impairments. It was difficult to set it to the specific value the users wanted to.
![\"Slider](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/slider-before.png\")
We solved it by offering an alternative. Users can now either use the slider or input the numbers directly in the input fields.
![\"Slider](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/slider-after.png\")
This turned out great for mobile users as well. Their fingers were previously covering the value under the slider as they were adjusting it. Now they could see it above the slider in the input fields as well. A win for everyone.
\nHere are some other examples of offering alternatives to users:
\nInstead of forcing people to call customer service, offer an alternative to write in a chat or email.
![\"Call,](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/chatcallphone.png\")
Instead of forcing people to understand a diagram, offer an alternative to see the data in a table:
![\"Diagram](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/tablediagram.png\")
Instead of forcing people to read an article, offer an alternative to watch a video:
![\"Video](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/video-text.png\")
Note that it’s the combination of alternatives that’s the key. Not just a video or just text, but the combination of them. Let the user choose!
\nThere are two main things to keep in mind when it comes to colors and accessibility: color contrasts and not relying solely on color.
\nGood contrasts between text and background is important to make your content accessible to low vision users, or users who have sunlight reflecting off their screens.
\nHere’s an example of light gray text on Squarespace that doesn’t fulfill the contrast guidelines in the Web Content Accessibility Guidelines (WCAG):
\n![\"Tiny,](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/10/squarespace.png\")
A normal contrast failure is for link colors. Mediatemple have links that are far from acceptable:
\n![\"Light](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/linksfail.png\")
To give you a feel for how little it takes to make your contrast sufficient, here is an example of failing contrasts for both the gray text and blue link, and an example of sufficient contrasts for the gray text and blue link.
![\"Comparison](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/contrasts.png\")
You wouldn’t believe how hard I sometimes have to fight with art directors to get them to increase the contrasts to an acceptable level. Even though \u2013 in my view \u2013 everyone benefits and there’s not that big a difference aesthetically. Or is it just me?
\nAnyway, it’s easy to measure contrasts yourself. Here are some free contrast checkers we recommend!
\nSome people with color vision deficiencies can’t tell different colors apart.
\nHere’s an example that would create problems:
![\"Color](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/09/color-blindness-bad-e1504605383163.png\")
![\"Color](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/Fa\u0308rgblind-bra-exempel.png\")
A common fail to this criteria is links that are only blue:
![\"Two](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/links.png\")
Viewing this in grayscale makes it clear why this is important:
![\"Previous](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/greyscale-links.png\")
Some ways to make your links pop out is underlining them, giving them link icons or making them look like buttons:
![\"Links](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/09/link-examples.png\")
If you want to know more on this subject, check out our article on color blind accessibility.
\nSome users with motor impairments navigate using their keyboard. Many assistive technologies like switches, magnification and screen readers also rely on keyboard accessibility. But what does it mean to make your site or app keyboard accessible?
\nMake sure that it’s clear which element has focus when tabbing around in your interface.
\nThe default focus indicator varies between browsers, but it’s often not very easy to spot.
\n![\"Thin,](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/focus-default.png\")
Some sites, like Only.in, have even removed the default focus indicator. Most likely because someone googled how to remove it because they thought it looked ugly when focus was on their search field.
\n![\"Arrow](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/focus-lost.png\")
On gov.uk focus is indicated with an orange background that really stands out from the surrounding:
![\"Clear](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/keyboard-focus-gov-1.png\")
So design a clear focus indicator and implement it using the :focus selector in your css.
\nSkip-links are a bit magical! They don’t show up for most people, but if you navigate with a keyboard you’ll find them very helpful.
\nThey are made visible only when they receive focus and basically provide a shortcut past all the links in the site header and menus, so you quickly can get to the content of the page.
\nHere’s a skip-link in action at www.starbucks.com.
Try it out yourself by going to Starbucks and pressing the tab key on your keyboard until you see it (in any other browser than Safari, where keyboard navigation first needs to be activated in settings for some reason).
\nMaking your site or app accessible for users with visual impairments who use screen readers is a lot about coding correctly and following the html-standard. For example: instead of building buttons and links out of spans, use the button and link elements.
\nAnother thing you need to do is add alt-texts to images, which conveys their meaning to people who can’t see them. Editors need to learn how to do this in their Content Managment System. It takes about 5 seconds for each image.
![\"Alt-text](\"https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/10/kissing.png\")
Accessibility is a lot about simplicity and usability. Make your interface intuitive and use a clean layout and you’ll help all users, including screen reader users.
\nThere is of course more to accessibility than I’ve listed above. But the point is that it’s not rocket science. Also, making your site or app accessible does not mean you have to make it boring and remove all colors, images and videos.
\nAccessible sites can \u2013 and should \u2013 be made awesome and beautiful! If you want our help achieving this in your projects, let’s work together!
\nFinally, I’d want to recommend the world’s best tumblr:
\n\nIt’s a collection of accessibility wins \u2013 that is, examples of awesome accessibility solutions on sites and apps. Jump over there and read it all!
\nThe post Practical Examples of Accessibility Improvements appeared first on Axess Lab.
\n", "content_text": "“It would be great to see actual examples of accessibility in action. Like before and after accessibility improvements.” I got this great comment from a woman in the audience at a meetup. So let’s make that idea a reality!\n\nOffer alternatives\nAccessibility is a lot about offering people alternatives.\nHere’s an example from “real life”. When I was user testing with people with disabilities, this slider proved to be an obstacle for people with motor impairments. It was difficult to set it to the specific value the users wanted to.\nWe solved it by offering an alternative. Users can now either use the slider or input the numbers directly in the input fields.\nThis turned out great for mobile users as well. Their fingers were previously covering the value under the slider as they were adjusting it. Now they could see it above the slider in the input fields as well. A win for everyone.\nHere are some other examples of offering alternatives to users:\nInstead of forcing people to call customer service, offer an alternative to write in a chat or email.\nInstead of forcing people to understand a diagram, offer an alternative to see the data in a table:\nInstead of forcing people to read an article, offer an alternative to watch a video:\nNote that it’s the combination of alternatives that’s the key. Not just a video or just text, but the combination of them. Let the user choose!\nColors\nThere are two main things to keep in mind when it comes to colors and accessibility: color contrasts and not relying solely on color.\nColor contrasts\nGood contrasts between text and background is important to make your content accessible to low vision users, or users who have sunlight reflecting off their screens.\nHere’s an example of light gray text on Squarespace that doesn’t fulfill the contrast guidelines in the Web Content Accessibility Guidelines (WCAG):\n\nA normal contrast failure is for link colors. Mediatemple have links that are far from acceptable:\n\nTo give you a feel for how little it takes to make your contrast sufficient, here is an example of failing contrasts for both the gray text and blue link, and an example of sufficient contrasts for the gray text and blue link.\nYou wouldn’t believe how hard I sometimes have to fight with art directors to get them to increase the contrasts to an acceptable level. Even though \u2013 in my view \u2013 everyone benefits and there’s not that big a difference aesthetically. Or is it just me?\nAnyway, it’s easy to measure contrasts yourself. Here are some free contrast checkers we recommend!\nDon’t rely solely on color\nSome people with color vision deficiencies can’t tell different colors apart.\nHere’s an example that would create problems:Simply labeling your colors is a way to make color pickers accessible:\nA common fail to this criteria is links that are only blue:\nViewing this in grayscale makes it clear why this is important:\nSome ways to make your links pop out is underlining them, giving them link icons or making them look like buttons:\nIf you want to know more on this subject, check out our article on color blind accessibility.\nKeyboard accessibility\nSome users with motor impairments navigate using their keyboard. Many assistive technologies like switches, magnification and screen readers also rely on keyboard accessibility. But what does it mean to make your site or app keyboard accessible?\nFocus indication\nMake sure that it’s clear which element has focus when tabbing around in your interface.\nThe default focus indicator varies between browsers, but it’s often not very easy to spot.\n\nSome sites, like Only.in, have even removed the default focus indicator. Most likely because someone googled how to remove it because they thought it looked ugly when focus was on their search field.\n\nOn gov.uk focus is indicated with an orange background that really stands out from the surrounding:\nSo design a clear focus indicator and implement it using the :focus selector in your css.\nSkip-links\nSkip-links are a bit magical! They don’t show up for most people, but if you navigate with a keyboard you’ll find them very helpful.\nThey are made visible only when they receive focus and basically provide a shortcut past all the links in the site header and menus, so you quickly can get to the content of the page.\nHere’s a skip-link in action at www.starbucks.com.\nTry it out yourself by going to Starbucks and pressing the tab key on your keyboard until you see it (in any other browser than Safari, where keyboard navigation first needs to be activated in settings for some reason).\nScreen reader accessibility\nMaking your site or app accessible for users with visual impairments who use screen readers is a lot about coding correctly and following the html-standard. For example: instead of building buttons and links out of spans, use the button and link elements.\nAnother thing you need to do is add alt-texts to images, which conveys their meaning to people who can’t see them. Editors need to learn how to do this in their Content Managment System. It takes about 5 seconds for each image.You should check out our Ultimate Guide to Alt-texts!\nAccessibility is a lot about simplicity and usability. Make your interface intuitive and use a clean layout and you’ll help all users, including screen reader users.\nWrapping it up\nThere is of course more to accessibility than I’ve listed above. But the point is that it’s not rocket science. Also, making your site or app accessible does not mean you have to make it boring and remove all colors, images and videos.\nAccessible sites can \u2013 and should \u2013 be made awesome and beautiful! If you want our help achieving this in your projects, let’s work together!\nFinally, I’d want to recommend the world’s best tumblr:\na11ywins.tumblr.com\nIt’s a collection of accessibility wins \u2013 that is, examples of awesome accessibility solutions on sites and apps. Jump over there and read it all!\nThe post Practical Examples of Accessibility Improvements appeared first on Axess Lab.", "date_published": "2017-12-28T17:33:08+01:00", "date_modified": "2017-12-29T12:32:55+01:00", "author": { "name": "Hampus Sethfors", "url": "https://axesslab.com/author/hampelusken/", "avatar": "https://secure.gravatar.com/avatar/78107d6c74e95c8812698a2de239fe0f?s=512&d=mm&r=g" }, "image": "https://axesslab-9891.kxcdn.com/wp-content/uploads/2017/12/featured.jpg" } ] }