Skip to content
No results
MEC Knowledgebase
  • Installation
    • Installation
    • Activation
    • Auto Update
    • Manual Update
    • Change License Domain
  • Settings
    • General
    • Archive Page
    • Slugs/Permalinks
    • Currency
    • View All
  • Single Event
    • Single Event Settings
    • How to Add Event In MEC Plugin?
    • MEC Single Sidebar
    • Custom Fields
    • View All
  • Event Modules
    • Speakers
    • Organizers
    • Locations
    • Map
    • View All
  • Booking Settings
    • Booking Module
    • Booking Elements
    • Booking Form
    • Payment Gateways
    • View All
  • Event Submission
    • General
    • Access Level
    • FES Sections
    • Required Fields
    • View All
  • Integrations
    • Mailchimp
    • Paid Memberships Pro
    • BuddyPress
    • LearnDash
    • View All
  • Notifications
    • Booking Notification
    • Booking Confirmation
    • Booking Reminder
    • Admin Notification
    • View All
  • Addons
    • Elementor Single Builder Addon
    • Ticket and Invoice Addon
    • Event Seat Addon
    • Virtual Events Addon
    • View All
  • Other
    • Appearance Settings
    • Translation
    • Knowledge
    • Troubleshooting
    • Developer
MEC Knowledgebase

  • Categories
    • Installation
      • Installation
      • Activation
      • Auto Update
      • Manual Update
      • Change License Domain
    • General Settings
      • General
      • Archive Pages
      • Slugs/Permalinks
      • Currency
      • View All
    • Single Event
      • Single Event Settings
      • MEC Single Sidebar
      • How to Add Event In MEC Plugin?
      • Custom Fields
      • View All
    • Event Modules
      • Speakers
      • Organizers
      • Locations
      • Map
      • View All
    • Booking Settings
      • Booking Module
      • Add a Booking System
      • Booking Form
      • Organizer Payment Settings
      • View All
    • Event Submission
      • General
      • Access Level
      • FES Sections
      • Required Fields
      • View All
    • MEC Integrations
      • Mailchimp
      • BuddyPress
      • LearnDash
      • Paid Memberships Pro
      • View All
    • Notifications
      • Booking Notification
      • Booking Confirmation
      • Booking Reminder
      • Admin Notification
      • View All
    • Addons
      • Elementor Single Builder Addon
      • Ticket and Invoice Addon
      • Event Seat Addon
      • Virtual Events Addon
      • View All
    • Other
      • Appearance Settings
      • Translation
      • Knowledge
      • Troubleshooting
      • Developer

Submit a Ticket
MEC Knowledgebase

Toggle
  • Making the web accessible
  • How to Improve MEC Accessibility

Knowledge

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;
}

Share

Report Out Dated Content

If you think the content of this page does not reflect updated information, please let us know.

Report Now
Login Submit
0 Comments

No Comment.

Still no luck? We can help!

If you did not find what you were looking for, please submit a ticket in our support system.

Submit a Ticket
Webnus Banner
Modern Events Calendar

Please read our Terms and Conditions and Privacy Policy.

Review us on Trustpilot

Copyright © 2023. All rights reserved. Webnus Inc.