Akadálymentes webfejlesztés a Rise.sk-nál és a WCAG 2.2 AA alkalmazása

Web accessibility is not a button, an overlay, or an audit score. It is a property of the whole system that covers content, HTML, visual design, keyboard behaviour, forms, motion, and testing.

GoodRequest's original article on accessibility for developers helped frame the practical baseline. Their newer 2025 checklist goes deeper into semantics, language, control names, status messages, and focus traps. For Rise.sk, we compared those recommendations with the normative WCAG 2.2 text, WCAG-EM, and the WAI-ARIA Authoring Practices Guide.

Our wording is deliberate. The public website is designed and internally verified against WCAG 2.2 Level AA. This is not certification and it does not replace research with people who use assistive technologies.

What WCAG 2.2 AA means to us

WCAG groups requirements under four principles. Content must be perceivable, operable, understandable, and robust. Level AA is our public target. We also selected two WCAG 2.2 AAA outcomes. Focus should remain completely unobscured, and its appearance should remain clearly distinguishable.

WCAG 2.2 added criteria including minimum focus visibility, an alternative to dragging, a 24 by 24 CSS pixel minimum target, consistent help, and more accessible authentication. At Rise.sk, primary touch controls normally remain 44 to 48 pixels. Compact actions such as share buttons may be smaller, but stay above 24 pixels and retain sufficient spacing.

Our accessibility page keeps the review date, scope, method, known limitations, and contact details in one public place.

Semantic HTML before ARIA

We implement a button as <button>, a link as <a>, connect form controls to <label>, and structure content with appropriate landmarks and headings. A native element already provides keyboard behaviour, role, and state that a generic <div> would force us to recreate.

The WAI-ARIA APG describes a role as a promise. role="button" does not add Enter or Space activation. We use ARIA only to supply information native HTML cannot express by itself. Examples include an icon button's name, a carousel's current state, or a field's connection to its error.

Decorative icons and ambient layers are hidden from the accessibility tree. A decorative image has an empty alt. A meaningful image gets a concise alternative based on its purpose in context. When a graphic carries data, describing its appearance is not enough. The same conclusion must be available as text.

Keyboard, skip link, and focus

The main journey must work without a mouse. The skip link is the first operable element. It appears on focus and moves the user to the main content.

Our focus indicator has two contrasting layers. The dark layer remains visible on light and gold surfaces, while the gold layer remains visible on dark surfaces. In forced-colors, we use the system colour instead of overriding the user's palette.

A modal lightbox needs more than Escape. On open, focus moves inside, the page background becomes inert, Tab stays within the dialog, and closing returns focus to the thumbnail that launched it. Swipe remains optional. Previous and next buttons always provide a one-action alternative.

Contrast and information beyond colour

Normal text targets at least 4.5 to 1, large text 3 to 1, and meaningful interface boundaries or icons 3 to 1 against adjacent colours. We test the actual design-token combinations instead of judging colour names.

Colour alone is not enough. Inline article links are underlined before hover. A form error includes text and a programmatic relationship, not only a red border. The current carousel dot has a programmatic state, not only a different colour.

Findable and understandable form errors

The contact form uses visible labels and meaningful autocomplete tokens. After an invalid submission, it renders a linked error summary, moves focus to the first error, and gives each invalid control aria-invalid and aria-describedby.

Submission success and failure are announced in a safe live region. Users receive feedback without having to watch a specific part of the screen, and every error remains identifiable in text.

Reflow, text resize, and spacing

At 200% text size, content and controls must remain available. A 320 CSS pixel reflow test is a practical equivalent of 400% zoom on a 1280-pixel canvas. The page becomes one column without horizontal scrolling of the whole document.

Named two-dimensional areas such as a wide data table can be an exception. The area gets its own keyboard-accessible scroll container and a textual hint. It must not make the full page scroll sideways.

We separately apply the WCAG text-spacing override. It increases line height, paragraph spacing, and letter and word spacing. A component cannot depend on fixed text height.

Reduced motion is more than a shorter animation

With prefers-reduced-motion: reduce, we remove the automatic intro, parallax, smooth scrolling, and unnecessary transitions. The state change stays understandable without relying on movement. Content that automatically changes for more than five seconds must be pausable. Rise.sk does not use uncontrolled content of that kind.

The same rule applies to carousels. Swipe is never the only control, state changes are announced, and transitions can have zero duration.

How we test, and why axe is not enough

Automated checks are excellent for repeatable failures. They catch missing names, invalid ARIA, some contrast problems, landmarks, and target size. They cannot reliably decide whether an alt is useful, focus order is logical, an error is understandable, or a journey is usable.

We therefore follow a representative WCAG-EM process:

1. define scope, goal, and conformance level,
2. identify templates, key functionality, and technologies,
3. select a representative sample including significant variants,
4. evaluate automated and manual criteria,
5. record findings and concrete limitations.

The Rise.sk matrix covers all six homepage locales, static templates, portfolio variants, audit modules, contact and profiles, calculators, several blog types, legal pages, 404, and the accessibility page. Axe must report zero WCAG 2/2.1/2.2 A and AA violations without impact filtering. Best-practice findings are reviewed separately because not every recommendation is a conformance failure.

Manual review covers keyboard journeys, dialogs, focus return, 200% text, 320px reflow, text spacing, orientation, reduced motion, and accessibility-tree names, roles, and order. A green automated scan is one piece of evidence, not the end of the audit.

We state the legal context carefully

Directive (EU) 2019/882 applies from 28 June 2025 to defined products and consumer services. Slovakia transposed it through Act No. 351/2022 Coll., which has its own scope, exceptions, and obligations for economic operators.

We do not turn those instruments into a blanket claim that every website has the same legal duty, or that an internal WCAG audit proves legal compliance for a specific service. That depends on the service, entity, and circumstances and requires legal assessment.

For Rise.sk, accessibility is a voluntary quality standard. It helps people, reduces interface blind spots, and makes the system more resilient under keyboard use, zoom, translation, and slower devices.

What remains outside this statement

Internal verification is not independent certification. It does not replace a third-party audit or research with people who use screen readers, voice control, magnification, or other assistive technologies every day. Those are natural next steps, not something an automated score can pretend to provide.

If you find a barrier on Rise.sk, email rise@rise.sk or use the contact form. Include the URL, what you were trying to do, and the browser or assistive technology you use. We will investigate each concrete report.