An accessible website is suitable for everyone

An accessible website is suitable for everyone

Why do you have a website?

The goal is not to have a website but to have a website that works. The web should work for you, provide information, entertain, sell, educate… People go to the web because content and information. Therefore, it is necessary to meet the needs of users.

Imagine you have school website. Children’s parents will not call you how much they pay for lunches and when they should pay for them if they simply find this information on the school’s website. (How we helped to the school in Trutnov?)

Imagine you have e-commerce site. You don’t have to have an information telephone line if customers simply find information about returning products on your website.

An accessible website is suitable for everyone

People are different. Did you know that:

  • 9 % of men are colorblind (only 0.4% of women) [1],
  • more than half of the world’s population will be nearsighted by 2050 [2],
  • 10 % of the population has learning disability [3],
  • 26 % of the population is in the range of 50-70 years?

But for example:

  • 67 % of users browse the internet from a mobile phone or tablet and this figure is growing [4],
  • voice control is an emerging trend.

How do I recognize an accessible website?

At first glance? Not at all. It does not fundamentally limit the accessibility of the creator in any way. There is no contradiction between creating an amazing and accessible website.

Accessibility has a major impact on the user experience (UX) [5]. An accessible website contributes to readability, allows the customer to quickly find information and quickly navigate on the website. The accessible website is also safe, you can read about this in my interview for NÚKIB – Why have an accessible, safe website?

“Why have an accessible website?” “Because no one will ever complain about your site being barrier-free.” Radek Pavlicek [6]

Advantage 1: Contrasting colors and a suitable font size make it easy to use the web from small screens or in a bright room.

Advantage 2: Alternative texts attached to images are useful for users with a slow internet connection.

Advantage 3: Transcribing audio into text or captions in a video are great helpers for users who are in a noisy environment and do not have headphones available.

The most common websites issues

There are many ways how to throw a spanner in the works to users. Sometimes, however, those spanners create an unmanageable barrier.

For all the users:

  • navigation on the web is chaotic and the web has a complex structure, texts are complicated and uninteresting,
  • descriptions are not informative enough, auto-fill does not work, web search is missing,
  • pop ups appear unexpectedly on the web,
  • link texts are not meaningful or descriptive enough.

For mobile users:

  • the website is not fully responsive,
  • clickable elements are too small or too close together,
  • the font is low contrast (not visible in the sun).

For seniors, partially sighted, near-sightedness:

  • the font is not contrasting,
  • inappropriate font parameters (font size, font readability),
  • the links are not differentiated and visible enough.

For dyslexics:

  • as the font is enlarged, some content is lost or long lines are created that are difficult to read,
  • whole paragraphs are written in capital letters (excluding headings).

For people with personality disorder:

  • the site contains moving or flashing elements that draw attention from content,
  • a background sound plays on the website, that cannot be turned off.

For e-readers and voice control:

  • Missing skip links and defined site sections (header, footer, main and secondary content, etc.),
  • navigation is not consistent (it is in different places on the web, content changes, etc.),
  • headings and other semantic blocks (lists, etc.) are used incorrectly, images do not have alternative descriptions,
  • attached documents do not have a text layer, videos do not have subtitles or a text transcript,
  • there are duplicate links on the website immediately after each other.

For keyboard users:

  • the website is not fully controllable from the keyboard,
  • the focus of the clickable elements is not visible or has little contrast.

Conclusion

Do not take website accessibility requirements as a limitation and not at all just as an obstacle that just needs to be avoided. Take an accessible website as a challenge. The results are worth it. You may not notice the differences at first glance, but for many people it will be a fundamental change.

Resources

[1] https://cs.wikipedia.org/wiki/Barvoslepost

[2] https://zpravy.aktualne.cz/zahranici/lidstvu-hrozi-slepota-do-roku-2050- rapidne-pribude-zrakove-p/r~2d96ad18784711e7986b0025900fea04/

[3] https://www.learningsuccessblog.com/what-dyslexia-infographic

[4] https://www.netmonitor.cz/sites/default/files/prilohy/Cesi_Online_2020_Infogra fika_SPIR.pdf

[5] https://uxdesign.cc/website-accessibility-and-ux-how-are-they-related- c3693f81cbc0

[6] https://poslepu.cz/proc-mit-pristupny-web/

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Case Study: Even a large school with a lot of activities can have a clear website

Case Study: Even a large school with a lot of activities can have a clear website

logo - Primary school Mládežnická 536, Trutnov
logo – Primary school Mládežnická 536, Trutnov

Once upon a time… 

…there were the six primary schools in Trutnov. They need to define and differentiate themselves and also attract attention. Primary school Trutnov 2 Mládežnická tried to achieve this with a colorful, graphically distinctive and very comprehensive website. Primary School Mládežnická is progressive and successful school, with lots of activities. In addition to the usual things like after-school care centre and school club, it offers school hobby groups and courses at the Eldorado Club. The school is very focused on sports activities and modern digital technologies. The school is also involved in international projects (Erasmus, E-Twinning) and students are participating in skills, knowledge and art competitions.

All this contributed to the fact that the school website became a little well-arranged labyrinth over time, where the visitor was easily lost. On the home page, the user did not know what to click. If user didn’t know the web well, he had to wonder where the information he was looking for might be. Related information was also often in different places. On the contrary, some information was duplicated in different places in different navigation menus several times.

How we helped

Our work was performed in 3 stages:

  1. we went trough an analysis of the original website
  2. we proposed a change in the structure and a new graphic design
  3. we transferred key content from the original website and significantly modified it for the the new one

Evaluation of the original website 

The basis of our work was to go through the web and find out where what was hidden. We have identified a number of shortcomings.

Complicated menu

  • The website contains several independent menus
  • Top bar – login to the student’s book, to the email, to the website
  • Links to share – RSS, Youtube, Facebook
  • Navigation in the page header
  • Main navigation in the sidebar, which had up to 3 levels – it changes on the home page to squares at the top of the page
  • Projects menu – visible only on the home page

Inconsistency

  • The location of the main menu was in a different places on the home page and on the other pages
  • For several pages, News was listed first and content of the page was below them, for most of the pages it was the opposite
  • Some links from the menu referred directly outside the school website

Confusing or incomplete pages

  • It was not clear where to look for stuff, navigation overlapped with the content, similar information were in more menus
  • Some content (eg projects) was divided into several menus
  • Similar information were divided into several pages – the user had to click through the site unnecessarily before he got the required information
  • Some pages resembled „coloring books“ – multicolored texts were used so that it was not clear which information was most important on the page
  • Underlining of the text was used both to differentiate links and just to highlight text
  • Important information (eg specific measures due to COVID-19 for the school) were listed only in PDF files, not in text form directly on the site
  • Mandatory published information according to Act No. 106/1999, Coll., were missing

Inaccessible content (against WCAG 2.1)

  • Links were missing for quickly changing-over to the main content (criterion 2.4.1 level A)
  • Some menu items were not accessible from the keyboard (criterion 2.1.1 level A)
  • The text and background colors used were not sufficiently contrasting (criterion 1.4.3 level AA) . The first level of the side menu (if it had the submenu opened) had white text on a white background – the text was not visible at all
  • Some information was inserted into the tables unnecessarily, which caused problems with responsiveness on the mobile phone (criterion 1.4.10 level AA)
  • Link texts were only a web addresses without an explanation of where the links lead to (criterion 2.4.4 level A)
  • Rotating content (so-called Carousel) on the front page stole user attention from the other web content and could not be stopped (criterion 2.2.2 level A)
  • Some headings were not really headings, but only text formatted in the same way, lists were not actual lists (criteria 1.3.1 level A and 2.4.6 level AA)
  • Spaces were used in the articles to format and indent text (criterion 1.3.2 level A)
  • Bad text wrapping caused mostly by incorrect copying from a text editor (eg article TRUTNOV DRAGON was dominated by home teams) (criterion 1.3.2 level A)
  • There were abbreviated words and abbreviations that are incomprehensible for someone who didn’t know what it was, eg GaP, ŽP, etc. (criterion 3.1.4 of level AAA)

What was the result?

“The biggest benefit of the new website? Clarity, simplicity, easy orientation. ” Mgr. Zdeněk Géc, school principal

  • The website is fully accessible in accordance with WCAG 2.1 criteria passing the AA level (and thus also Act 99/2019, Coll.). As always, accessibility of the website was verified by SONS.
Certificate of accessibility of the https://zsmltu.cz website at the AA level from the SONS organization
Certificate of accessibility of the https://zsmltu.cz website at the AA level from the SONS organization
  • There is only one menu left on the site, which has only 2 levels. The original 79 selections of menu narrowed to 22.
  • Visual style has been unified across the web.
  • Information is always in one place. This makes them easier to update and easier to find.
  • We have merged pages with similar content into one (After-school Care Centre, Projects, School Club Octopus…).
  • Maximum amount of information is inserted as text directly on the site, instead of the original external documents, images with text, etc.
  • News from the given category are also listed on the relevant pages (COVID-19, Family, Octopus, Eldorado, Sport).
  • Web loading has accelerated significantly, both on the computer and on the mobile phone.

The WordPress content management system and our Accessible School Theme template are used on the new website. We created this template in order to easily meet the requirements of web accessibility according to the WCAG 2.1 specification. Originally, there were concerns about whether the template could serve such a demanding website – but the template was used without any problems. We did not encounter any technical problems and we were therefore able to focus on optimizing the content and the structure.

What to write in conclusion?

Do you also manage broadly focused school? Do you need not only to modify your website to meet the accessibility criteria, but really improve it? Contact us. We are not afraid of challenges. We work on each project individually and with dedication.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

FBIfest – Why have an accessible, safe website?

FBIfest – Why have an accessible, safe website?

Our colleague Mishka was approached by NÚKIB employee Petra Sobková for an interview for the ongoing Safe Internet Festival. Mishka is working on creating fully accessible sites for kindergartens, primary schools and high schools, and Petra asked her why to have well-secured and accessible website. You can read it here:

In 2019, a new law came into force – No. 99/2019 Coll. on the topic of accessibility of websites and mobile applications. This law regulates the accessibility of the web and applications in the public sector. The obligation to have an accessible website has affected a number of public administration organizations and, among others, schools and school facilities. They are also a mandatory entity by law, but only regarding to content of website that is required  by law  to be on websites of schools, school facilities and universities  regarding to the operation of public administration that is related to school system, science, research, development, innovation and other creative activities caring about children and youth or regarding to the law of free access to information. [1]

In practice, this means the reconstruction of those parts of the website that are subject to a legal obligation. For many principals, this legislation has become an impetus for the complete reconstruction of the school’s website. If you are among those who are considering rebuilding the website for any reason, read the interview with Ms. Mgr. Michaela Vranková, programmer and specialist in website accessibility. You will learn what accessibility actually means, what its advantages and disadvantages are, and how accessibility is related to security.

Elementary school and Kindergarten Deblín
Elementary school and Kindergarten Deblín

What is website accessibility?

The solution of accessibility of websites and internet applications is based on four principles. First, users must be able to perceive the content of the site completely, regardless of whether they have a visual impairment. Furthermore, users must be able to control the website. The information and controls must be clear. Finally, it must be possible to view content on different types of devices. Accessible web is simply one that does not put any obstacles for user.

Why deal with accessibility when accessibility is required to only a limited extent so far and to some entities it is no required at all?

For some, the reason may be a legal requirement, for others a commercial advantage. I deal with accessibility because it makes sense to me and mainly because I have no arguments why not to deal with it. It is interesting that this issue is pushed from below. The WCAG methodology (note: Web Content Accessibility Guidelines 2.0) was created years ago on the basis of cooperation between developers and users, only then this methodology was pushed by the government and enshrined its requirements into law.

But with accessibility comes the extra expenses, doesn’t it?

It depends. Each site represents an additional cost (for example, against a classic official board). On the other hand, we create websites to work for us. For example, if the site is working properly, we do not have an overloaded school secretariat with telephone inquiries that parents can easily find on the site.

Kindergarten Hrušovany u Brna
Kindergarten Hrušovany u Brna

Most of us have accessible websites associated with users who have a visual impairment. These people represent only a certain percentage of the population. Does it make sense to address accessibility for other users as well?

It is true that accessibility was first discussed in connection with users who have disabilities – not just the visual impairment. People with disabilities are often socially isolated and the internet can make their lives much easier. This is the reason why state and public organizations must address the accessibility of their websites by law. However, the circle of people for whom accessible websites make life easier is much wider. Approximately 26% of the population is over 50 years old and have difficulty using a computer. You could also imagine that someone has his right arm broken and he only controls computer with his left hand. Are you sure these users are not your target group? And what about emerging new technologies? More than half of users already use the web via their mobile phones and voice assistants such as Siri or Alexa are spreading… Do you want to make a specialized website for them? From my point of view, an accessible website is more advantageous for everyone – it is clearer, faster, easier to read and safer.

You say safer – so what’s the relationship between accessibility and security for websites and applications?

I strongly disagree with the view that accessibility and security go against each other. On the contrary, they can and should work together. A nice example is the gradual removal of Flash (an outdated technology used for animations and Internet applications). With its retreat a number of security issues disappear and at the same time it is usually a shift in the right direction in accessibility. And what do I mean by that? That security and accessibility can be addressed together, it is only necessary to think about these aspects as a whole from the beginning, and not to address both areas separately.

Can you give an example?

A common example is the security of forms against spam. A popular method is CAPTCHA, but it is often far from accessible. Imagine yourself being very short-sighted and having to recognize which of 9 tiny pictures is a ship or a bird. At the same time, there are a number of other methods of securing the form against spam that do not impose any requirements on the user and may not even notice them.

Otnice Elementary School and Kindergarten
Otnice Elementary School and Kindergarten

Is accessibility also related to the security of the user or is the solution to the accessibility and security (protection) of the system being addressed in the first place?

There are several aspects to user safety. For example, accessibility allows user to use a website or application without the help of another person, for example, user does not have to share his login details with someone else in order to log in to the application on his behalf and perform the actions he needs. Providing login details to a third party – whether knowingly or unknowingly – is very dangerous not only for the user himself, but also increases the risk of hacking the entire system. In addition, it is just a step towards identity theft, data theft and sometimes leads to financial loss. The user must feel comfortable and safe when he is working with the application or website. That is the domain of accessibility. As I said, accessibility and security are addressed together.

How do you approach creating a website?

When I design websites, I imagine how my family would work with them. My eight-year-old daughter is just starting to use the internet and she often clicks anywhere without considering what will happen. The middle son has a strong dyslexia disability and he needs to enlarge the font and longer texts are very difficult for him. My older son browses websites only on his mobile phone, my father-in-law doesn’t really understand computers – which one should I exclude? These people might be a typical target group for school website – from children to parents and grandparents. Therefore, I have to satisfy everyone and at the same time I do not want to make different variants of the website (normal website, accessible website, mobile website, etc.). I use this approach not only in the graphical and user interface design, but also in the website structure and content of the website

Does this approach work in practice afterwards?

It works very well. The problem is usually arises only with the content, because I don’t have full influence on it. I have to convince the customer that he has to make the information clearer and simpler and also that they must follow certain rules when creating content. What’s more, it’s not a one-time affair – content is created on an ongoing basis, so accessibility rules needs to be kept in mind.

Is there anything you would like to tell to the reader?

Don’t be afraid of accessibility. Do not consider site accessibility requirements as a limitation or an obstacle that just needs to be bypassed. Take it as a challenge. The result is worth it. You may not notice the differences at first glance, but for many people, change will be crucial.

The interview was created for the purposes of the Safe Internet Festival.

Interviewer: Mgr. Petra Sobková, NÚKIB

Interviewee: Mgr. Michaela Vranková, ZENI

Mishka - WordPress Developer
Mishka – WordPress Developer

Expert´s profile:

Mgr. Michaela Vranková works as a developer. She builds websites on the WordPress platform by programming her own templates to ensure maximum accessibility. She considers the accessibility as the friendliness of the website, regardless of the age or disability of the user, to be one of the basic criteria of the modern website.Her focus is mainly on school websites. Michaela has connection with them because she is the mother of three children. She even won first place in the sCOOL web 2017 competition for the Deblín Primary School website. She also runs the pristupne-stranky.cz website, where she deals with legislation and at the same time advises other programmers on how to work with accessibility. Since 2019, she has been a member of the Zeni team, which cooperates with SONS ČR to test the accessibility of the website.


[1] Citation of the law No. 99/2019 Coll. on the topic of accessibility of websites and mobile applications.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Case Study: website for Hrušovany Kindergarten on the Accessible School Theme

Case Study: website for Hrušovany Kindergarten on the Accessible School Theme

It is interesting how many people do not realize that the kindergarten websites are not intended for children (who usually cannot read), but for parents looking for information. So when you put together one kindergarten with 3 workplaces on one website and a mad graphic designer, the result is clear – yet quite typical.

Hrušovany Kindergarten decided to do something about it. The starter was the legal requirement for web accessibility, but fortunately it was not just this. It was also an idea that a good school website does not have to be infantile, but mainly that visitors must easily find all the information they need.

Evaluation of the original website 

Complicated menu

  • When the visitor was looking for information in the menu, he had to click through up to 4 levels. The pages were divided in terms of content and then into individual kindergartens, or further into kindergarten classes, eg Basic information → Our classes → Kindergarten Havlíčkova → Ladybugs class or Kitchen → Payments → Kindergarten Havlíčkova
  • Some links pointed to pages with only one link or file, eg Documents → Basic information about SEP or Documents → School regulations.
Documents - School rules, original website
Documents – School rules, original website
  • Some pages have been listed several times in multiple menu locations, eg the Operating rules of the canteen were in Kitchen → Operating rules and also in Basic information → Tuition and meals → Operating rules
  • The website contained pages that had no content – they were not filled at all, eg Photo Gallery → Joint Events

Unsatisfactory graphics

  • The strong background distracted you as you browsed the web. The background image was also too large and significantly slowed down web loading.

Illogical content

  • Sections with similar content were in several places
  • Where to find us (only maps with address)
  • Contacts (address, emails, phones)Kontakty (adresa, emaily, telefony)
  • For example, the complete text of the “registration for meals” was listed on the page with the information: „Do not print this registration, it will be handed over to you at the parents’ meeting in August with the assigned variable symbol.”

Confusing pages

  • The entire contents of the articles were listed in the news section
  • Orientation in the text was hampered by the inconsistency of headings and articles  eg 
    • different size headings,
    • some headings were written in capital letters, others were not,
    • the whole text of some articles was bold, etc.
  • Important informations on the website were often only in PDF files or as images, not as text directly on the website, eg menus

Discrepancy with accessibility requirements according to WCAG 2.1

  • The site was not responsive
  • Links to skip to main content and other sections were missing
  • The web menu was not keyboard-operable
  • The website did not meet the requirements for contrast (web menu)
  • Informations were inserted as pictures without other textual anotation, eg Open Day, Enrollment in Kindergarten, Projects, Operation on summer holidays, Allergens …
  • Rotating stars at sections, which could not be stopped it
  • The structure and controls were inconsistent

Benefits of the new website

The website is fully accessible for the disabled people

We have obtained the Certificate of Web Accessibility from SONS. The website meets the WCAG 2.1 criteria at the AA level

Certificate of accessibility of the website mshrusovany.cz, SONS CR
Certificate of accessibility of the website mshrusovany.cz, SONS CR
  • The technical solution of accessibility included mainly:
    • fully responsive web,
    • fine-tuned color contrasts,
    • links to skip to navigation and main content,
    • solution of duplicate links,
    • accessibility of all web controls from the keyboard (incl. menu),
    • control and orientation on the web so that it is consistent on all sites, etc.
  • The content was also fundamentally revised:
    • maximized information inserted on the web as text,
    • all PDF documents supplemented with a text layer,
    • all images carrying information contain alternative descriptions,
    • Information on the pages is structured using multi-level headings.

Simplified structure and navigation on the website

  • The menu has only 2 levels.
  • The structure has been changed so that each workplace has a separate item in the menu and common informations are inserted into one place.
  • All documents of the kindergarten are on one page.

Mobile web

  • The site is fully responsive.
  • Significant speed increase of loading.

Simplicity and clarity

  • The contacts for the kindergarten are unified in the footer of each page (all workplaces and canteen).
  • All information about one workplace is on one page.
  • Information is always in one place on the web – it is easier to find and better maintained.
  • The site does not contain any blank pages.
  • Larger pages have contents section with links to individual sections in the beginning.
  • The „Back to Top“ link allows the user to go to the top of the page.
  • In the news overview, only a brief excerpt of the article with a link to the full article is given.

Unified graphics

  • Graphic elements use 4 basic colors.
  • The size of the headlines is unified across the web.
  • News icons facilitate visual orientation. (according to the given category.)

Summary

What to write in conclusion? Even a kindergarten in a village with three thousand inhabitants can have a website that is modern, fast, functional, clear and accessible.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Case study: Accessible website for Primary and nursery School in Otnice.

Case study: Accessible website for Primary and nursery School in Otnice.

From September this year, all primary school websites must comply with the so-called accessibility rules. The point is to make the website usable and accessible for people with disabilities, such as the blind and partially sighted or deaf.

We have recently implemented our solution for schools based on the WordPress platform on www.zsotnice.cz, which is website of the primary and nursery school in Otnice.

For the existing pages, we have identified the following issues in terms of accessibility and simple user friendliness:

Complicated web navigation:

  • web contained 2 navigations (menus) that overlapped with content,
  • one of the menu had 3 levels.

Introductory carrousel(automatically rotating page content), which distracted from other information (this element is considered inaccessible content).Web complexity:

  • the entire content of the posts was listed in the list of posts, due to some posts the user had to scroll through several pages,
  • web contained pages that had no content (were not filled),
  • the site contained information that does not belong to the website – personal information, such as a list of students who paid for a ski course, etc.,
  • similar information was divided into several pages – the user had to click through the site unnecessarily before getting the required information.

Web opacity:

  • important information was on the web only in PDF files, not in a “plain text” form directly on the web, for example Clubs, Organization of the School Year, Meal Payments, Tuition Fees,
  • some links on the site were provided only by the URL of the link, it was not clear exactly what content the user would get to, for example important resources for choosing a profession,
  • menu items had several colors for no apparent purpose.

Inaccessible content:

  • cross references were missing,
  • the web menu was not controllable from the keyboard,
  • the site did not meet the requirement for contrasting colors,
  • small web font,
  • the website was not responsive – it was practically unusable on a mobile phone,
  • when browsing the web from the keyboard, it was not clear which link the user was on,
  • the download files were listed by file name, not content description.

So what did the new website from our production actually bring to the school in Otnice?

  1. Simplified web navigation – only 1 menu with 2 levels and an uniform color
  2. Simplification of the website: 
  • pages with similar content are merged into one,
  • maximum information embedded on the web directly in the texts,
  • informations on the web are always in one place – better searchable and are better maintained,
  • blank pages removed.
  1. Web acceleration.
  2. Responsive website.
  3. Contacts to the school directly in the header and footer of each page.
  4. Easy embedding of content on the web.
  5. The website complies with the accessibility rules.

We were happy that we helped to solve the requirements of accessibility for the website of the Primary and nursery School in Otnice. We thank the school management for their cooperation and we wish that their new website www.zsotnice.cz will satisfy the school, parents and students. 

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR