Improve MEC Accessibility

In this article, we will learn how to improve MEC Accessibility. According to W3C, When websites and web tools are properly designed and coded, people with disabilities can use them. However, many sites and tools are currently developed with accessibility barriers that make them difficult or impossible for some people to use.

Making the web accessible

Making the web accessible benefits individuals, businesses, and society. International web standards define what is needed for accessibility.

You can also use tools like WAVE Web Accessibility Evaluation Tool and WebAccessibility.com to check your accessibility level.

How to Improve MEC Accessibility

To improve accessibility in the Modern Events Calendar’s shortcodes and Single Event pages, you can add the following CSS to MEC Settings > Custom CSS.

By doing this, you will get more points in the Lighthouse in your browser, and you’ll implement proper accessibility for your website:

.mec-calendar.mec-calendar-daily .mec-calendar-d-table .mec-daily-view-day,
.mec-calendar.mec-calendar-weekly .mec-calendar-d-table dl dt.mec-weekly-disabled.mec-table-nullday span {
        font-weight: 300;
}

.mec-calendar .mec-event-article .mec-event-detail,
.mec-calendar .mec-calendar-side .mec-next-month a,
.mec-calendar .mec-calendar-side .mec-previous-month a,
.mec-calendar .mec-table-nullday,
.mec-single-event .mec-current,
.mec-single-event .mec-event-meta .mec-events-event-categories a,
.mec-single-event .mec-event-meta dd,
.mec-single-event .mec-next-event-details abbr,
.mec-yearly-view-wrap .mec-agenda-date-wrap i,
.mec-yearly-view-wrap .mec-agenda-date-wrap span.mec-agenda-day,
.mec-calendar.mec-calendar-daily .mec-calendar-d-table .mec-daily-view-day,
.mec-calendar.mec-calendar-weekly .mec-calendar-d-table dl dt span,
.mec-skin-tile-month-navigator-container .mec-next-month,
.mec-skin-tile-month-navigator-container .mec-previous-month,
.mec-events-agenda-wrap span.mec-agenda-day,
.mec-events-agenda-wrap .mec-agenda-time,
.mec-event-grid-modern .event-grid-modern-head .mec-event-day,
.mec-event-grid-modern .mec-event-content p,
.mec-event-grid-clean .mec-event-content p,
.mec-event-grid-classic .mec-event-content p,
.mec-event-list-modern .mec-event-date .event-f,
.mec-event-list-modern .mec-event-date .event-da,
.mec-wrap .mec-time-details,
.mec-wrap .mec-event-detail,
.mec-wrap .mec-event-loc-place {
    color: #000;
}

.mec-wrap .mec-av-spot-wrap p,
.mec-event-tile-view ul.mec-categories li.mec-category a,
.mec-event-tile-view .mec-event-loc-place,
.mec-skin-grid-container .mec-event-grid-novel .mec-event-address,
.mec-skin-grid-container .mec-event-grid-novel .mec-event-detail,
.mec-skin-grid-container .mec-event-grid-novel .mec-event-month,
.mec-skin-grid-container .mec-event-grid-novel ul.mec-categories li.mec-category a,
.mec-skin-grid-container .mec-event-grid-novel ul.mec-categories li.mec-category a:before,
.mec-skin-grid-container .mec-event-grid-novel .mec-shortcode-organizers a,
.mec-skin-grid-container .mec-event-grid-novel .mec-shortcode-organizers i:before,
.mec-event-grid-colorful ul.mec-categories li.mec-category a,
.mec-event-grid-colorful .mec-event-content .mec-grid-event-location,
.mec-event-grid-colorful .event-grid-modern-head .mec-event-day,
.mec-event-grid-colorful ul.mec-categories li.mec-category a,
.mec-wrap .mec-skin-grid-events-container .mec-time-details,
.mec-wrap .mec-skin-grid-events-container .mec-event-loc-place,
.mec-wrap .mec-event-grid-classic .mec-time-details {
    color: #fff;
}

Making the web accessible

How to Improve MEC Accessibility

Share

Report Out Dated Content

No Comment.