Hiya Stackers! Looking in to designing a website catering for visually impaired user, with Stacks and Foundation 6 being the framework. Visually it would be a regular website, but can be easily switched to cater for visually impaired visitors.
I’m thinking first off there is the ARIA aspects of the Stacks with F6, which is great for screen readers etc, but when considering the colour schemes that need to be high contrast and font sizes that can be user adjusted this is what I am thinking, using some form of toggle for the Styles/Swatch, I haven’t tried yet but am guessing I can put two sets of styles on the page make one active and the other inactive.
However I’m wondering if anybody else has a better solution or experience with this, any tips? Am I thinking in the wrong direction and following a more clumsy route with a better solution hiding in plain sight?
Any advice would be greatly appreciated, thanks all.
Foundation 6 has been extensively tested with visually impaired users. Guy Woodland on the WS community has been a huge proponent for this and I have worked in adding a ton of features based on his testing and requests. At last year’s conference we tag teamed and did a couple of sessions on Accessibility as well (filter by Accessibility category).
As for adjusting the theme of the site for users, this is pretty easy to do. You can use the Toggler swatch to toggle classes on the entire page or just sections in order to change colors and sizes. You could also use my Pi stack to dynamically update the text size. Check out demo 4.
That’s great, thanks Joe (and Jannis for the notification), I’ll search out and view the content from the link. And that’s great news regarding the toggler swatch I’ll look in to that also, I think that’s the way to go toggling swatches, thanks again, really appreciated.
FYI. I just happened to be here reading through Isaiah’s threads. I don’t hang out on this forum much. I need to control where my attention is directed somehow or else I’d never get stuff done. If you need help in a timely fashion about any of my products, you may want to join my WS community. I am very active over there.
1 Like
Hi @Tophat
I only use Joes f6 and mainly work with the VI community. As Joe says a lot of work went into accessibility for and we were able to demonstrate a JAWS screen reader in action at conference which I think helped people understand the challenges.
Contrast is very important. You can check here https://wave.webaim.org
Font size equally so. A general rule might be no smaller than 18 point with a line length of approximately 8 words as people that use electronic magnifiers such as supernova get whiplash following ridicules line lengths. If you magnify your screen to say 1000% you will see the effect.
Lighthouse gives an overall feel as a guide https://developers.google.com/web/tools/lighthouse
The VI community detest toggle switches which are generally used because of poor design and in the US courts have ruled against toggles as a defence in litigation cases.
The best way to check is to get people who use assistive technologies to check out your site. We will be offering this as a service later in the year.
2 Likes
Thanks Guy for your recommendations, this is an aspect I am working with, an organisation and group of people, with their input and feedback so yes that is very valid and what you are saying about toggles is also an interesting point. Along with Containers the ARIA aspects of F6 when upgrading from F1 was something that just jumped straight out at me as a wow new feature. Looking more in to it at that time I immediately contacted a friend of mine who is visually impaired with 5-10% vision so is very dependent on a screen reader and asked him “What do you know about ARIA?” he had never heard of it, but then again he is a user/consumer. I do think that the ARIA aspects of F6 is like a secret strength of F6, probably not well known or recognised but an enormous inclusion and strength of F6 as a web development tool. The ARIA aspects I imagine will be playing a larger role in design as time progresses with more awareness.
I have a question if you don’t mind? If not using a toggle, the aim is for the website to be attractive, usable and appeal to the non-visually impaired user and then be accessible and usable by individuals ranging from near-zero to 50% visual range, would you reccomend a high contrast design standard throughout that works for both scenarios? It’s just the group have expressed a wish that they can change aspects of colour scheme (more contrast to be fair) and font size, but based on what you saying and the documentation links provided it would appear not be a best practice to have switchable layouts, I/we are UK based so it may be a case that the group being users as opposed to developers may believe themselves a toggle or switch is the only way and instead address the matter through design instead?
I’m just thinking now possibly a homepage that is designed visually impaired first with the option to view the whole site as two different design styles, I would just need to figure out a method of the option r’emembering’ which site style/swatch to use. I imagine there is a way, without duplicating content.
Sorry for the lengthy reply, I really appreciate your comments, I’m just aware that with forums somebody else could find this useful in two tears time and will be facing the same questions/dilemas.
Contrast - if you thing about publishing and websites are in a way just a modern form of publishing, I guess thinking about books it was black on white.
Aria are like hidden clues for screen reader, the provide information about element beyond html. Generally Joe has sorted a lot. You don’t want to overdo aria just use it where html lets you down.
The other thing that Joe built in was the ability to put text just for screen readers.
The main things people I work with draw attention to is alt tags where relevant, ie not decoration and titles on links which again joe has allowed as an option on most stacks and with total cms you can add in code view.
It’s great your working with VI people. Test early with them and them let them lead the design process. It is interesting and I’ll try and find the link where a designer makes the statement that you should never design for “them” but rather design for all and you won’t go to wrong. The web has always been radish in the sense that when we have done audits and we ask the designer why they are doing this and that they never have an answer because they do what they do because they can not because it was considered. Classic is headings which for screen reader need to be in order. Most home pages fail on this because headings are used because they are bigger or smaller and so visual designers use them for visual design rather than the fact that each page should have one h1 and h2 for sections and so on. Screen readers use headings like stepping stones and with the Macs built in accessibility tools you can tab through the headings, if there not in order it becomes difficult to tab through a page which creates frustration for the user.
This is not totally true but makes some really good points bestmotherfucking.website
3 Likes
Thanks Guy much appreciated, and yes working with the group is the aim, it’s good experience for everyone in that context. And alt tags that has been mentioned by my friend, they are very important for him with images to have a descriptor. The link you have given to the page is bob on for headers and text. Thanks again.