Skip to main content
All CollectionsOther
Improve MEC Accessibility
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...

Hakan Turan avatar
Written by Hakan Turan
Updated over a week ago

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

.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

Did this answer your question?