timoosterveer / all-human-accessible-website Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fdnd-task/all-human-accessible-website

0.0 0.0 0.0 8.01 MB

Ontwerp en maak voor een opdrachtgever een component/pagina/site toegankelijk volgens WCAG richtlijnen

Home Page: https://dikketimo.github.io/all-human-accessible-website/

License: GNU General Public License v3.0

HTML 93.87% JavaScript 0.99% CSS 5.14%

all-human-accessible-website's Introduction

Vervoerregio Amsterdam

Beschrijving

De Vervoerregio is een samenwerkingsverband van veertien gemeenten op het gebied van verkeer en openbaar vervoer. Om op een goede manier te overleggen en besluiten te nemen zijn er diverse (bestuurs)vormen van overleg: De regioraad, het dagelijks bestuur, portefeuillehoudersoverleggen en commissies.

Het doel is om een website te maken voor de partners van Vervoerregio Amsterdam om te laten zien wat je moet doen om de desbetreffende website toegankelijk te maken. De toegankelijkheid wordt een groot probleem als mensen met een beperking websites proberen te bezoeken maar deze niet goed toegankelijk zijn.

Backlog item:

Vervoerregio Amsterdam wil kunnen laten zien aan partners wat zij moeten doen om hun website toegankelijker te maken.

Op de site kan je zien wat je per onderwerp kan doen om een website toegankelijker te maken. Je kan klikken op bijvoorbeeld afbeeldingen, dan kom je op een andere site wat laat zien wat je kan doen aan dit specifieke onderwerp. Er staan een aantal kopjes over wat je kan doen om de afbeeldingen toegankelijker te maken.

De website is ook uitgevoerd met een darkmode slider en back to-top button.

Link naar de website

https://dikketimo.github.io/all-human-accessible-website/

Kenmerken

In dit project is veel html gebruikt, daarbij css en javascript. Voor elk onderwerp is een aparte html pagina gebruikt.

Bronnen

all-human-accessible-website's People

Contributors

all-human-accessible-website's Issues

Logo website

Is dit alt attribuut hier echt wat je bedoelt? Zie bijvoorbeeld https://www.w3.org/WAI/tutorials/images/decision-tree/

https://github.com/DikkeTimo/all-human-accessible-website/blob/172d43fddef237c69ad8808bbfa4a4399e1db5bc/index.html#L13

Heading levels

Pas op met heading levels zelf verzinnen :) Is <h5> hier echt het volgende level? En zijn dit überhaupt headings?

https://github.com/DikkeTimo/all-human-accessible-website/blob/172d43fddef237c69ad8808bbfa4a4399e1db5bc/media.html#L247-L255

Tiny correction to the dot in the switch

https://github.com/DikkeTimo/all-human-accessible-website/blob/main/styles/style.css#L79

Put this to 3px for better aligning the dot in the toggle

Dark mode on mobile

Your dark mode toggle is so nice, but not accesible on mobile :(

Try to make it accessible on mobile, like the screenshot.

Hints

    /* position: fixed; */
    display: flex;
    align-items: center;
    /* margin-top: 7rem; */
    /* margin-left: 67rem; */

Interactieve elementen nesten

Werkt het lekker als je een <button> in een <a> zet? Mag dit van de HTML specificatie? Wat levert het op?

https://github.com/DikkeTimo/all-human-accessible-website/blob/172d43fddef237c69ad8808bbfa4a4399e1db5bc/afbeeldingen.html#L24-L30

Gebruik van icons voor navigatie items

In de aside staan een aantal links met titels als: afbeelingen, ontwerp etc.
Gebruik eventueel een icon ::before zodat een alternatief bevat.
Font awesome kan hierbij een goeie partij zijn.

Bezoek font awesome

Centering menu items

In your media-query there are relative unites that are based on the viewport. That's the reason why the menu items are not perfectly centered.

Try to use the css line margin: 0 auto;. That will position an element in the middle.

var() problem

https://github.com/DikkeTimo/all-human-accessible-website/blob/main/styles/style.css#L171

Transform it to var()

Challenge: hamburger-menu

To challenge you, when the website is visited on mobile, there is no menu.
To solve that problem, make an hamburger menu when the viewport is at mobile size.

Hint

You can do it pure CSS (without js), but it can be done with js
Use mediaqueries

Although, you can make the same accordion effect without JS! :)

Take a look at the HTML details tag on MDN.

Menu on desktop

The menu is not visible at some tablet/desktop sizes.
Try to make the menu a horizontal bar, so the user can interact with the menu.

For example, look at the screenshot